首页 > 技术文章 > setTimeout和setInterval定时器使用详解测试

jiangtian 2017-01-03 09:35 原文

var len=4;
while(len--){
  var time=setTimeout(function(){
    console.log(len);
  },0); 
    console.log(time);
};

控制台打印结果:

循环执行4次setTimeout给了4个ID,分别是1,2,3,4。而setTimeout函数是被放入函数队列中等待执行,虽然给予的间隔时间为0,但实际每个浏览器的最小间隔都不一样,小于那个值的时候,间隔数不确定。所以最后得出的结果是4个-1也就是循环执行完的结果,队列中放置了4个setTimeout函数。下面我们来测试,以chrome为例:

var startTime = new Date();
    setTimeout(function () {
        console.log(new Date() - startTime);
    }, 100)

当为>100的时候,一直维持给定值。但若小于某个值则会随机给数,比如75,或者77。可以自己测试。具体规律还待研究。这个设定定时器的函数在队列中执行的真实时间间隔取决于后面同步执行的js需要占用多少时间,也即它既然在队列中,虽然设定了某值,但有可能超过这个时限才能执行。

setTimeout(function () {
        func1();
    }, 0)
    func2();

实例代码:

setTimeout(function(){
  (function(){console.log(1)})();
}, 0);
(function(){console.log(2)})();

请问谁先执行?根据前面的分析,func2肯定先执行,然后是func1。

再来一题

    setTimeout(function () {
        func1()
    }, 0)
和

    setTimeout(function () {
        func1()
    })
有什么差别?

0秒延迟,此回调将会放到一个能立即执行的时段进行触发。javascript代码大体上是自顶向下的,但中间穿插着有关DOM渲染,事件回应等异步代码,他们将组成一个队列,零秒延迟将会实现插队操作。不写第二个参数,浏览器自动配置时间,在IE,FireFox中,第一次配可能给个很大的数字,100ms上下,往后会缩小到最小时间间隔,Safari,chrome,opera则多为10ms上下。

额外知识:《你真会用setTimeout吗?》《关于软件的生命周期》《JavaScript的setTimeout和setInterval的深入理解

JavaScript的setTimeout和setInterval的深入理解》这篇文章提到的几个知识点很好:

1.js是单线程。

2.setTimeout及setInterval只是伪异步,和伪多线程。

3.它的实现原理就是计算一个时间插入到代码队列中去,如果插入的代码前的执行不完,后面不会执行。

4.ajax实现的不过伪异步而已。

5.setTimeout函数的第一个参数将会在全局作用域内执行,因此参数内的 this 将会指向全局对象。

6.常犯的错误,setTimeout 函数的第一个参数指的是函数对象本身,不能写成类似 setTimeout(foo(), 1000),因为 foo() 是函数返回值,而不是 foo 本身。

7.即使回调函数的执行被阻塞,setInterval 函数依然会继续调用更多的回调函数。当间隔时间设置较小时,将会导致回调函数堆积。最简单且最可控的方式就是在回调函数内部使用 setTimeout 函数。

8.Javascript 中并没有内置的函数方法来清除所有的定时器(timeout 或 interval),不过我们可以使用一种暴力的方法来清除所有的定时器。

// clear "all" timeouts
for(var i = 1; i < 1000; i++) {
    clearTimeout(i);
}

但是很明显,由于指定最大值的限制,还会有定时器没有被清除掉。由于 ID 会随着定时器被调用的增加而增加,因此更好的方法是记录下最大的 ID 并一起清除。

// clear "all" timeouts
var biggestTimeoutId = window.setTimeout(function(){}, 1),
i;
for(i = 1; i <= biggestTimeoutId; i++) {
    clearTimeout(i);
}
9.不要使用字符串作为 setTimeout 或 setInterval 函数的参数,当需要向回调函数中传递参数时,我们可以用匿名函数的,在匿名函数内部执行回调函数。
另外,尽量避免使用 setInterval 函数,从而避免可能导致的回调函数堆积现象。
10.js高级编程里写的setTimeout的第一个参数需要“”包裹,实际运用过程好像函数名的话,无所谓。这里的“”也可以直接传递可以运行的js代码,类似eval()实现的功能。
11.
js定时器setTimeout(longPress,500);和setTimeout("longPress()",500),效果一样,推荐用前者,后者双重求值,类似的还有eval等。
12.
setTimeout((function(){
      console.log("delayer:" + i);
  })(),0);
调用setTimout的时候,相当于调用立刻执行函数返回的undefind。

推荐阅读