出自:https://blog.csdn.net/u014695532/article/details/51753778
定时器提供了一种让一段代码在一定毫秒之后,再异步执行的能力。由于Js是单线程的(同一时间只能执行一处Js代码)。定时器提供了一种跳出这种限制的方法,以一种不太直观的方式来执行代码。
需要注意的是,定时器并不是Js自身的一个功能。定时器作为对象和方法一部分才能够使用。这也就提醒我们,在非浏览器的环境中使用JS,很可能定时器就不存在了。
1、创建和清除定时器
JavaScript提供了两种方法创建和清除定时器,且这两种方法都是window对象上的方法。如下表:
方 法 | 格 式 | 描 述 |
---|---|---|
setTimeout | id = setTimeout(fn, delay) | 启动一个定时器,并且在一段时间之后执行传入的callback, 最后返回该定时器的唯一标识 |
clearTimeout | clearTimeout( id ) | 如果定时器还没触发,出入定时器唯一标识可取消(清除)该定时器 |
setIterval | id = setInterval(fn, delay) | 启动一个定时器,并且在没个一段时间之后便执行一次传入的callback, 最后返回该定时器的唯一标识 |
clearInterval | clearInterval( id ) | 传入间隔定时器标识,即可取消(清除)该间隔定时器 |
2、timeout 和 interval之间的区别
看看下面的代码片段,
// 定义一个timeout定时器,没个10毫秒都重新调度自己
setTimeout(function repeatMe() {
console.log( ' setTimeout...' );
setTimeout( repeatMe, 10);
});
// 定义一个interval定时器,每10毫秒都触发一次
setInterval(function() {
console.log("setInterval...");
});
思考,上面两段代码功能相同吗??
答案是,NO!!
咋一看似乎是相同的,可值得注意的是,setTimeout()代码中,要在前一个callback回调执行结束后并延迟10毫秒以后,才能再次执行setTimeout(); 而setInterval则是每隔10毫秒就尝试执行callback回调,而不用关心上一个回到函数是合适执行的以及是否已经执行结束。
- Js引擎是单线程执行,异步事件必须要排队等待才能执行。
- 如果无法立即执行定时器,该定时器贵被推迟到下一个可用的执行时间点上(可能更长,但不会比指定的延迟时间少)。
- 如果一直被延迟,到最后,Interval间隔定时器可能无延迟执行,并且同一个interval处理程序的多个实例不能同时进行排队。
- setTimeout() 和 setInterval()在触发周期的定义上是完全不同的。
理解js引擎是如何处理异步代码的,尤其是如何处理通常发生在页面上的大量异步事件,是构成高级应用程序代码的重要基础。
3、定时器延迟时间的可靠性
设想一下,我们设置一个定时器,让它每隔一秒执行一次,执行100次。在这100次中浏览器真的是按照我们所设想的那样每次都是精确的延迟1秒钟执行的吗?? 答案是否定的。
对于不通浏览器来说,它们的定时器延迟时间可靠性差异很大。实际上什么样的延迟值都有。
注意:
IE浏览器有一个缺陷,当我们对interval()设置0毫秒的延迟时,该定时器的callback回调只会执行一次。和使用setTimeout的效果一样。
4、中央定时器控制
几乎所有的动画引擎中都使用一个叫做中央定时器控制(center timer control)的技术。这是因为通常在动画中需要控制和操作很多的属性,这也就需要大量的定时器。但是大量的定时器带来一个严峻的问题:同时创建大量的定时器,无意会在浏览器中增加了垃圾回收的可能性。虽然有些浏览器可以很好的应对这一问题,不过有些浏览器就不那么给力了。这也就是为什么一个动画在一些浏览器中表现的很好 很流畅,但是在另外一些浏览器中却很卡。
在多个定时器中使用中央定时器的好处:
- 每个页面在同一个时间总需要运行一个定时器;
- 可以根据需要暂停和回复定时器;
删除回调函数的过程变得很简单;
下面,让我们看一个使用该技术来管理多个函数的例子:
// 定时器控制对象
var timer = {
// 记录状态
timerID: 0,
timers: [],
// 添加处理程序
add: function ( fn ) {
this.timers.push( fn );
},
// 开启定时器
start: function() {
if ( this.timerID ) return;
(function runNext() {
if ( timers.timers.length > 0 ) {
for ( var i = 0; i < timers.timers.length; i++ ) {
if ( timers.timers[i]() === false ) {
timers.timers.splice(i, 1);
--i;
}
}
timers.timerID = setTimeout(runNext, 0);
}
})();
},
// 停止定时器
stop: function() {
clearTimeout( this.timerID );
this.timerID = 0;
}
};
5、基于中央定时器控制技术的异步测试
中央定定时器控制带来的另一个便利是在执行异步测试的时候。下面代码,是一个简单的异步测试套件。
(function() {
// 保存状态表
var queue = [],
pause = false;
// 测试注册函数
this.test = function( fn ) {
queue.push( fn );
runTest();
};
// 停止测试
this.pause = function() {
pause = true;
};
// 回复测试
this.resume = function () {
pause = false;
setTimeout(runTest, 1);
};
// 运行测试
function runTest() {
if ( !pause && queue.length ) {
queue.shift()();
if ( !pause ) {
resume();
}
}
}
})();