setTimeout()与setInterval()
一、setTimeout与setInterval的用法(http://www.css88.com/archives/5804)
setTimeout是超时调用,javascript是一个单线程的解析器,因此在一定时间内只能执行一段代码;setTimeout的第二个参数只是告诉javascript再过多久将当前任务添加到执行队列中,如果队列是空的,当前添加的代码就会立即执行;如果队列不是空的,就会等前面的代码执行完了之后再执行。(所以超时调用中的方法不一定就会在给定的超时时间到了之后立马执行,前面的代码有可能执行的时间超过这个给定的超时时间)
超时调用每次调用只会执行一次,要想反复执行超时调用,setTimeout函数内部再添加setTimeout方法。
setTimeout ( function () {
var div = document.getElementById("div4");
//var left = parseInt(div.style.left) + 5;
var left = div.offsetLeft + 5; div.style.left = left + "px";
if (left < 200) {
setTimeout( arguments.callee, 50);
} }, 50);
setInterval是间歇调用,调用一次一直执行,直到页面卸载。和setTimeout一样,指定的时间间隔表示的是何时将定时器的代码添加到队列中;setInterval确保了定时器代码规则的插入到队列中,但是,如果定时器代码之前的代码执行时间比定时器间隔要长,会出现如下情况:1、某些间隔可能会被跳过,2、多个定时器的代码执行之间的间隔可能会比预期的小。
var num = 0;
var max = 10;
var intervalId = null; function incrementNumber () {
num ++ ; if (num === max) {
clearInterval (intervalId);
}
} intervalId = setInterval (incrementNumber, 500);
所以一般用setTimeout方法来实现一个定时器(如第一个实例)。
var num = 0;
var max = 10;
//var intervalId = null; function incrementNumber () {
num ++ ; if (num < max) {
setTimeout (incrementNumber, 1000);
console.log("1");
}
} setTimeout (incrementNumber,1000);
2017-1-13更新:
问题模拟:下面的代码开始执行之后,如果先触发的是add这个事件,程序中就会存在多个定时器,最后clear掉的也是最后一个定时器,前面的定时器都无法被清除,如果知道定时器的id值也可以通过clearInterval()清除指定的定时器。后面的定时器的id覆盖了前面id,intervalTimer始终保存的是最后的定时器的id。
var button = document.getElementById("clear");
var add = document.getElementById("add");
var intervalTimer = null;
zhixing();
function zhixing() {
intervalTimer=setInterval(function(){
console.log("in:"+intervalTimer);
console.log(1);
},3000);
console.log("out:"+intervalTimer); //一般是一个数字,Number
} button.onclick=function(){
alert("onclick...");
// clearInterval(2);
clearInterval(intervalTimer);
console.log("clear:"+intervalTimer); //一般是一个数字,Number
}; add.onclick = function() {
//zhixing();
intervalTimer=setInterval(function(){
console.log("in:"+intervalTimer);
console.log(22222);
},3000);
console.log("out:"+intervalTimer); //一般是一个数字,Number
};
总结: setTimeout调用一次执行一次,setInterval调用一次,一直执行直到页面卸载。
setInterval能够确保定时器代码被规则的加入到队列中,但使用setInterval也可能会产生一些问题,例如:某些间隔会被跳过,
多个定时器代码之间的执行间隔比预期的小。
setTimeout可以模拟出setInterval的执行方式,而且可以确保前一个定时器在执行完成之前不会向队列中插入新的定时器代码,
所以不会有缺失间隔的情况;也保证了下一次定时器代码执行之前,至少要等待指定的间隔。
一个定时器的执行时间,和其同步执行的js代码有关,指定的间隔时间,只是定时器被加入到队列中的最小时间。
将定时器的间隔时间设置为0时,代码会立即执行。
var startTime = new Date();
setTimeout(function () {
console.log(new Date() - startTime);
}, 100); setTimeout(function () {
console.log("111111");
}, 0); setTimeout(function () {
console.log("22222");
});
setTimeout()与setInterval()的更多相关文章
- 深入理解定时器系列第一篇——理解setTimeout和setInterval
× 目录 [1]setTimeout [2]setInterval [3]运行机制[4]作用[5]应用 前面的话 很长时间以来,定时器一直是javascript动画的核心技术.但是,关于定时器,人们通 ...
- 前端开发:setTimeout与setInterval 定时器与异步循环数组
前端开发:setTimeout与setInterval 定时器与异步循环数组 前言: 开通博客园三个月以来,随笔记录了工作中遇到的大大小小的难题,也看过无数篇令人启发的文章,我觉得这样的环境是极好的, ...
- setTimeout和setInterval从入门到精通
我们在日常web前端开发中,经常需要用到定时器方法. 前端中的定时器方法是浏览器提供的,并不是ECMAScript规范中的.是window对象的方法. 浏览器中的定时器有两种, 一种是每间隔一定时间执 ...
- setTimeout和setInterval定时器使用详解测试
var len=4; while(len--){ var time=setTimeout(function(){ console.log(len); },0); console.log(time); ...
- setTimeout,setInterval原理
function a() { setTimeout(function(){alert(1)},0); alert(2); } a(); 和其他的编程语言一样,Javascript中的函数调用也是通过堆 ...
- Javascript的setTimeOut()和setInterval()的定时器用法
Javascript用来处理延时和定时任务的setTimeOut和setInterval函数应用非常广泛,它们都用来处理延时和定时任务,比如打开网页一段时间后弹出一个登录框,页面每隔一段时间发送异步请 ...
- setTimeout和setInterval的注意事项
精准问题 setTimeout的问题在于它并不是精准的,例如使用setTimeout设定一个任务在10ms后执行,但是在9ms后,有一个任务占用了5ms的cpu时间片,再次轮到定时器执行时,时间已经过 ...
- setTimeout和setInterval的区别以及如何写出效率高的倒计时
1.setTimeout和setInterval都属于js中的定时器,可以规定延迟时间再执行某个操作,不同的是setTimeout在规定时间后执行完某个操作就停止了,而setInterval则可以一直 ...
- setTimeout 和 setInterval
设置定时器,在一段时间之后执行指定的代码,setTimeout与setInterval的区别在于setTimeout函数指定的代码仅执行一次 方法一: window.setTimeout(" ...
随机推荐
- See you~_树状数组
Problem Description Now I am leaving hust acm. In the past two and half years, I learned so many kno ...
- [C++] 自己实现快速memcpy
仅在Win32上使用,Win64上不允许内嵌汇编= = __declspec(naked) void* __stdcall __memcpy ( __in void* Dest, // ebp+0x0 ...
- iOS8: Ignore manifest download, already have bundleID
在企业分发的app下载过程中,iOS8发现挂在官网上的企业版的app点击了提示是否安装应用程序,但始终安装不上程序,的device console发现安装的时候出现 LoadExternalDownl ...
- C语言中关于对目录的操作
原文地址:C语言中关于对目录的操作 目录的操作不论是在嵌入式产品还是应用软件编程都是必不可少的,不同的开发语言可能略有不同,笔者主要是讨论在Linux平台下对目录的一系列操作: 1.获取当前目录操作: ...
- PowerDesigner中Name与Code同步的问题
转自:http://blog.sina.com.cn/u/48932504010005t9 PowerDesigner中,但修改了某个字段的name,其code也跟着修改,这个问题很讨厌,因为一般来说 ...
- 遗传算法,实数编码的交叉操作之SBX(模拟二进制交叉)
本文主要介绍遗传算法(实数编码)的交叉操作中的SBX,模拟二进制交叉. 首先,给出个人用python2.7实现的代码,具体模块已上传到: https://github.com/guojun007/sb ...
- Techparty-广州 10 月 31 日 Docker 专场沙龙 后记
华为的童鞋技术能力很强,但是两位讲师的都没听进去.重点听了两个,一个是芒果TV的Docker 之路,另一个是Coding的实践和思考. 芒果TV的主讲人是一直仰慕的CMGS,从豆瓣出来后去了国企芒果台 ...
- Matlab编程基础
平台:Win7 64 bit,Matlab R2014a(8.3) “Matlab”是“Matrix Laboratory” 的缩写,中文“矩阵实验室”,是强大的数学工具.本文侧重于Matlab的编程 ...
- 1.Counting DNA Nucleotides
Problem A string is simply an ordered collection of symbols selected from some alphabet and formed i ...
- xmind的第十三天笔记