JS定时器

定时器主要由setTimeout()和setInterval()这两个函数完成。

1.setTimeout()函数用来指定某个函数或某段代码,在多少毫秒之后执行。它返回一个整数,表示定时器的编号,以后可以用来取消这个定时器。
syntax:
<pre>
var timerId=setTimeout(func|code,delay)
</pre>

示例:
<pre>
function showTime(){
console.log(1);
}
setTimeout(showTime(),1000);//输出结果为1
</pre>

注意:为了便于JavaScript引擎优化代码,setTimeout方法一般总是采用函数名的形式。

2.setInterval()
setInterval()函数的用法与setTimeout完全一致,区别仅仅在于setInterval指定某个任务每隔一段时间就执行一次,也就是无限次的定时执行。
示例:
<pre>
var timer=setInterval(function(){
console.log(2);
},1000);
</pre>

setInterval指定的是“开始执行”之间的间隔,并不考虑每次任务执行本身消耗所消耗的时间。因此实际上,两次执行之间的间隔会小于指定的时间。比如,setInterval指定每100ms执行一次,每执行需要5ms,那么第一次执行结束后95毫秒,第二次执行就会开始。如果某次执行耗时特别长,比如需要105毫秒,那么它结束后,下一次执行就会立即开始。
为确保两次执行之间有固定的时间间隔,可以不用setInterval,而是每次执行结束之后,使用setTimeout指定下一次执行的具体时间。
示例:
<pre>
var i=1;
var timer=setTimeout(function(){
alert(i++);
timer=setTimeout(arguments.callee,2000);
},2000);
</pre>

setTimeout和setInterval的运行机制是,将指定的代码移出本次执行,等到下一轮Event Loop时,再检查是否到了指定时间。如果到了,就执行对应的代码;如果不到,就等到了再下一轮Event Loop时重新判断。这意味着,setTimeout指定的代码,必须等到本次执行的所有代码都执行完,才会执行。

每一轮EventLoop时,都会将“任务队列”中需要执行的任务,一次执行完。setTimeout和setInterval都是把任务添加到“任务队列”的尾部。因此,它们实际上要等到当前脚本的所有同步任务执行完,然后再等到本次Event Loop的“任务队列”的所有任务执行完,才会开始执行。由于前面的任务到底需要多少时间执行完,是不确定的,所以没办法保证,setTimeout和setInterval指定的任务,一定会按照预定时间执行。

一直有一个疑问,如果setInterval里面的函数的执行时间大于设定的时间间隔会怎么样呢?
<pre>
setInterval(function(){
console.log(2);
},1000);

(function(){
sleepling(3000);
})();
</pre>

上面的第一行语句要求每隔1000毫秒,就输出一个2。但是,第二行语句需要3000毫秒才能完成,这样会发生的结果是:等到第二行语句运行完成以后,立刻连续输出三个2,然后开始每隔1000毫秒,输出一个2。也就是说,setIntervel具有累积效应,如果某个操作特别耗时,超过了setInterval的时间间隔,排在后面的操作会被累积起来,然后在很短的时间内连续触发,这可能或造成性能问题。

参考文章:定时器

版权归王丽峰和饥人谷所有,若有转载,请注明来源。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 从JS执行机制说起 浏览器(或者说JS引擎)执行JS的机制是基于事件循环。 由于JS是单线程,所以同一时间只能执行...
    love2013阅读 917评论 0 1
  • 前言:在引用开发中,我们经常需要在页面中执行一些周期性的操作,比如每隔一段时间就执行某一固定的操作。而对于这样的操...
    帅帅哒小白阅读 5,370评论 1 3
  • 定时器 JavaScript提供定时执行代码的功能,叫做定时器(timer),主要由setTimeout()和se...
    李诺哦阅读 1,057评论 0 0
  • 1. if name == 'main' 作用 简单来说,就是这个语句只有在这个文件自己被执行的时候才会true执...
    JaiUnChat阅读 212评论 0 0
  • 11月,广州依然繁花叶茂! 来个禅绕花园也不错! 慕卡,一直很喜欢的禅绕图样!多个变化组合一起,也不觉得杂乱,真是...
    芯之禅绕阅读 449评论 0 4