setTimeout到底是如何执行的

一. setTimeout会被放到阻塞队列中

首先来看下这个题目,看会输出什么:

for (var i = 0; i < 5; i++){
    setTimeout(function(){
        console.log(new Date(), i);
    }, 1000);
}

setTimeout(function(){
    console.log(new Date(), i);
}, 1000);

结果如下:

Tue Mar 21 2017 12:47:46 GMT+0800 (中国标准时间) 5
Tue Mar 21 2017 12:47:46 GMT+0800 (中国标准时间) 5
Tue Mar 21 2017 12:47:46 GMT+0800 (中国标准时间) 5
Tue Mar 21 2017 12:47:46 GMT+0800 (中国标准时间) 5
Tue Mar 21 2017 12:47:46 GMT+0800 (中国标准时间) 5
Tue Mar 21 2017 12:47:46 GMT+0800 (中国标准时间) 5

由结果可以看出它几乎在同一时间输出了 5 ,这是为什么呢?下面是我的解释:

>
JS在遇到setTimeout定时器时,会把定时器移到阻塞队列中,然后先去执行定时器外面的代码,直到定时器外面的代码执行完毕,才会去执行阻塞队列里的定时器中的代码,所以就会出现上面的结果。

它会先将for代码执行完毕,然而for里面只是注册了定时器,这些定时器会一秒钟后执行,一秒过后for已经执行完毕,所以i的值就是5了。

如果上面的代码没有说服力,请看下面的代码:

setTimeout(function(){
    console.log(new Date()+"结束");
}, 0);

var str = "";
console.log(new Date()+"开始");

for (var i = 0; i < 7000000; i++){
    str = str + i;
}
 console.log(str);

输出结果为:

Tue Mar 21 2017 13:12:52 GMT+0800 (中国标准时间)开始
一个很长的字符串。。。
Tue Mar 21 2017 13:12:53 GMT+0800 (中国标准时间)结束

我在代码里对定时器的延时为0,可是它先输出了开始时间,然后执行完for循环,过了一秒钟才执行定时器里面的输出,可以说明它被放到阻塞队列里,等外部函数执行完毕,才会去执行定时器里的函数。


二. 在setTimeout中将延时置为undefined或NaN都当做0处理

setTimeout(function(){
    console.log(new Date(), i);
}, i); //此时i应为undefined,代码正确执行
console.log(i) //undefined
var i = 5;

可见在setTimeout()中undefined被当做0处理;

setTimeout(function(){
    console.log(new Date(), i);
}, i + 5); //此时i应为NaN
console.log(i + 5); //NaN
var i = 5;

以上是我对setTimeout()的一个认识,如果哪里不对欢迎指正,共同学习,共同进步啊。

-------------本文结束感谢您的阅读-------------