用setTimeout()方法来模拟setInterval()与setInterval()之间的什么区别?

原创 2016年07月08日 17:32:22

对于setTimeout()跟setIntervl()之间的区别,你真的了解么?有时候看似简单的东西,往往隐藏一些你不知道的细节。setTimeout(fn,time)是超时调用,它在大于等于time之后调用fn;而setIntervl(fn,time)是间歇调用;每隔time调用一次。下面我要讲的是:用setTimeout()方法来模拟setInterval()与setInterval()之间的什么区别?


使用setInterval()创建的定时器确保了定时器代码规则地插入队列中。这个问题在于:如果定时器代码在代码再次添加到队列之前还没完成执行,结果就会导致定时器代码连续运行好几次。而之间没有间隔。不过幸运的是:javascript引擎足够聪明,能够避免这个问题。当且仅当没有该定时器的如何代码实例时,才会将定时器代码添加到队列中。这确保了定时器代码加入队列中最小的时间间隔为指定时间。

这种重复定时器的规则有两个问题:1.某些间隔会被跳过 2.多个定时器的代码执行时间可能会比预期小。

下面举例子说明:
假设,某个onclick事件处理程序使用啦setInterval()来设置了一个200ms的重复定时器。如果事件处理程序花了300ms多一点的时间完成。
这里写图片描述

这个例子中的第一个定时器是在205ms处添加到队列中,但是要过300ms才能执行。在405ms又添加了一个副本。在一个间隔,605ms处,第一个定时器代码还在执行中,而且队列中已经有了一个定时器实例,结果是605ms的定时器代码不会添加到队列中。结果是在5ms处添加的定时器代码执行结束后,405处的代码立即执行。

为了避免setInterval()的重复定时器的这两个缺点,可以使用下面的这种方法

setTimeout(function(){

    //do something

    setTimeout(arguments.callee,interval);
},interval)

上面实现了递归调用,这样做的好处是:在前一个定时器代码执行完成之前,不会向队列插入新的定时代码,确保不会有任何的缺失间隔。而且,它保证在下一次定时器代码执行之前,至少要等待指定的时间间隔。


参考资料:javascript高级程序设计第三版:重复定时器

版权声明:本文为博主原创文章,未经博主允许不得转载。

定时器setTimeout()、setInterval()详解

JavaScript 标准参考教程(alpha) 浏览器对象 ...
  • cxl444905143
  • cxl444905143
  • 2014年10月17日 08:40
  • 4940

运用setTimeout 替换 setInterval

通用的代码如下, setTimeout(function(){ //do something setTimeout(argu...
  • wocaonima332
  • wocaonima332
  • 2017年01月06日 09:45
  • 433

setTimeout()和setInterval()的区别和转换

定义 setTimeout()和setInterval()经常被用来处理延时和定时任务。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以...
  • lijiajun_blog
  • lijiajun_blog
  • 2016年12月06日 23:39
  • 3008

js中两种定时器,setTimeout和setInterval的区别

setTimeout只在指定时间后执行一次,代码如下: //定时器 异步运行 function hello(){ alert("hello"); } //使用方法名字执行方法 var t1 = wi...
  • shenyanwei
  • shenyanwei
  • 2017年03月31日 09:22
  • 1220

window.setTimeout() 和window.setInterval() 的区别

window.setTimeout() 和window.setInterval() 的区别
  • laijieyao
  • laijieyao
  • 2014年12月23日 08:28
  • 6962

setTimeout和setInterval的区别你真的了解吗?

setTimeout和setInterval这两个函数, 大家肯定都不陌生, 但可能并不是每个用过这两个方法的同学, 都了解其内部的实质,甚至可能会错误的把两个实现定时调用的函数理解成了类似threa...
  • cui_angel
  • cui_angel
  • 2012年07月20日 17:04
  • 1925

setTimeout与setInterval性能比较

谈到动画,就避不开setTimeout与setInterval,都能实现动画效果,但对我来说,只有需要手动控制帧的速率、频率时,我才会优先选择setTimeout,因为我知道,论性能,setTimeo...
  • yiifaa
  • yiifaa
  • 2017年01月11日 09:51
  • 1213

深入理解定时器:setTimeout与setInterval

来源:http://mp.weixin.qq.com/s/zVp6fygqiquwdR59Y44p4Q setTimeout setTimeout()方法用于在指定的毫秒数后调用函数或计算...
  • LinBilin_
  • LinBilin_
  • 2016年12月19日 13:09
  • 427

使用setTimeout或setInterval时遇到的问题总结

写定时器分两种写法,setInterval和setTimeout。 先来说setInterval: setInterval(code,millisec[,"lang"]) setInterval...
  • alex8046
  • alex8046
  • 2015年03月20日 17:34
  • 3530

setInterval();与setTimeout();的结合用法【js】

今天下午在写图片轮播的时候,想让“当鼠标放在图片上时,图片不轮播” 当我设置了鼠标over图片使time增加了几百倍。 然而由于我以前用的setInterval();调用的轮播效果, 我的图片依...
  • leibniz_zhang
  • leibniz_zhang
  • 2016年11月15日 16:52
  • 480
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用setTimeout()方法来模拟setInterval()与setInterval()之间的什么区别?
举报原因:
原因补充:

(最多只允许输入30个字)