用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) 浏览器对象 ...

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

定义 setTimeout()和setInterval()经常被用来处理延时和定时任务。setTimeout() 方法用于在指定的毫秒数后调用函数或计算表达式,而setInterval()则可以...

setTimeout 和 setInteval 的区别。

学习前端的可能都知道js有2个定时器setTimeOut和setinteval。用的时候可能不是很在意,但是2者还是有区别的 setTimeout方法是定时程序,也就是在什么时间以后干什么。干完就完...
  • yjkup
  • yjkup
  • 2016年11月24日 11:59
  • 539

setTimeout 和 setInteval

window对象有两个主要的定时方法,分别是setTimeout 和 setInteval     他们的语法基本上相同,但是完成的功能取有区别。  setTimeout方法是定时程序,也就是在什么时...

arguments,callee解读

arguments 是JS里面一个内置对象,是一个很有意思的对象 任何一个function 都存在有arguments,他是一个Object对象,有length,index方法,但没有数组的...

JavaScript学习总结-技巧、实用函数、简洁方法、编程细节

整理JavaScript方面的一些技巧,比较实用的函数,常见功能实现方法,仅作参考 变量转换 //edit http://www.lai18.com var myVar = "3....

img.onload 实现图片预加载方法

例子: 1111 function loadImage(url,callback) { var im...
  • kongjiea
  • kongjiea
  • 2014年04月22日 14:41
  • 43143

JS中setTimeout()和setInterval()方法的区别

因为setTimeout(表达式,延时时间)在执行时,是在载入后延迟指定时间后,去执行一次表达式,记住,次数是一次 而setInterval(表达式,交互时间)则不一样,它从载入后,每隔指定的时间就执...

setTimeout和setInterval方法区别

setTimeout   定义和用法:   setTimeout()方法用于在指定的毫秒数后调用函数或计算表达式。       语法:   setTimeout(code,millisec...
  • fzhsh
  • fzhsh
  • 2014年02月20日 10:40
  • 752

倒计时的实现&&settimeout和setinterval的区别

当前系统时间   window.onload = function(){     showTime();   }   function checkTime(i){  //补位处理 ...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用setTimeout()方法来模拟setInterval()与setInterval()之间的什么区别?
举报原因:
原因补充:

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