setTimeout与setInterval(一)
一. setTimeout
1. 定义
window.setTimeout(func,[delay,param1,param2,····]);window.setTimeout(code,[delay]);
参数说明:
a. 对于第一行代码:
func指的是延迟后想执行的函数,delay为延迟秒数,为毫秒,最大为32位有符号整数值,超过最大值即2147483647,将导致函数被立即执行。
param是func的参数,但是这种赋予参数的方法在IE9以下(含IE9)不兼容,可以使用polyfill或者外层包裹进行兼容性处理,有兴趣可以点击这里。
b. 对于第二行代码:
code指的是可执行代码,例如
setTimeout(alert("HeiHei"),200)
但是这种方法不推荐,类似eval(),可以包含可执行代码,含有安全隐患。
2. 事件添加的说明
定时器对队列的工作方式:当特定时间过去后将代码添加到队列中,但并不意味着会马上将执行,设定一个200ms后执行的定时器,指的是在200ms后它将被添加到队列中,是否执行,还得看队列中是否没有其他的东西。看一下例子:
var a=document.getElementById("nav"); a.onclick=function(){ setTimeout(alertsomething,200); //一些其他的代码}function alertsomething(){ alert("it is working");}
假定onclick处理程序需要执行300ms,这时虽然在205ms添加了定时器代码,但是仍旧需要等待onclick事件完成后才能够执行。如图所示,本来在205ms处添加了定时器代码,但是由于此时onclick事件还没结束,故要等到300ms后才执行定时器代码
3. 清除事件
window.clearTimeout(timeoutID);
4. 对于this的影响
setTimeout调用的代码,运行在与所在函数完全分离的执行环境上,在非严格模式中,this默认指向global或window,严格模式中会抛出undefined,通过call的方式目前也无法改变,官方的示例如下:
myArray = ["zero", "one", "two"];myArray.myMethod = function (sProperty) { alert(arguments.length > 0 ? this[sProperty] : this);};setTimeout.call(myArray, myArray.myMethod, 2000); // error: "NS_ERROR_XPC_BAD_OP_ON_WN_PROTO: Illegal operation on WrappedNative prototype object"setTimeout.call(myArray, myArray.myMethod, 2500, 2); // same error
对此我们可以使用外加一个匿名函数解决。
setTimeout(function(){myArray.myMethod()}, 2000); // prints "zero,one,two" after 2 secondssetTimeout(function(){myArray.myMethod('1')}, 2500); // prints "one" after 2.5 seconds
其他解决方案可以参照一下参考资料。
5. 事件延迟时间大于设定值
a.上文图中所示,队列中还有事件未执行完成,需要等待
b.chrome和firefox在未激活的标签中,会减缓setTimeout和setInterval的执行,具体原因可以参考下文的资料
c.由于浏览器精度的原因,delay的值最终大于等于4。
下面是w3c中的原文:
If the currently running task is a task that was created by the setTimeout() method, and timeout is less than 4, then increase timeout to 4.
举个例子:
setTimeout(function() {
alert(2);
}, 0);
alert(1); //先显示1,接着才显示2
二、setInterval
1.定义
跟setTimeout类似
window.setInterval(func, delay[,param1, param2, ...]);window.setInterval(code, delay);
为了避免多个定时器代码不间断连续运行好几次,当使用setInterval(),仅当没有该定时器的任何其他代码实例时,才将定时器代码添加到队列中,通俗点就是等到上个定时器完成,再添加一个。
2.缺点
某些间隔会被跳过
多个定时器的代码执行之间的间隔可能会比预期小。
在5处,创建一个定时器
205处,添加一个定时器,但是onclick代码没执行完成,等待
300处,onclick代码执行完毕,执行第一个定时器
405处,添加第二个定时器,但前一个定时器没有执行完成,等待
605处,本来是要添加第三个定时器,但是此时发现,队列中有了一个定时器,被跳过
等到第一个定时器代码执行完毕,马上执行第二个定时器,所以间隔会比预期的小。
3.解决方法
链式调用,如下图所示,主要用于重复定时器
setTimeout(function(){
//处理代码
setTimeout(arguments.callee,interval)
},intercal);
递归调用自己。
4. 清除事件
window.clearInterval(intervalID)
三、两者之间的区别
setTimeout方法,在一个指定的时间间隔后运行代码。
setInterval方法, 每隔一个固定的时间间隔后持续运行指定代码。
四、参考资料
MDN WindowTimers.setTimeout()
W3C Times
Chrome and Firefox throttle setTimeout/setInterval in inactive tabs
《JavaScript高级程序设计》Nicholas C.Zakas著 李松峰 曹力译
你真的了解setTimeout和setInterval吗
关键字:JavaScript
版权声明
本文来自互联网用户投稿,文章观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符,请点击 举报 进行投诉反馈!