setTimeout解读

看一个简单的例子：

for(var i=0; i<4; i++){
  setTimeout(function(){console.log(i)}, 0);
}

请问下这段代码会输出什么呢？

如果你觉得输出：

1

2

3

那你就错了，实际上它会输出

4

4

4

为什么是这个结果呢？这里给出的解释是：Javascript事件处理器是在线程执行完之后才执行事件，继续看下面的例子，你会更清楚：

var start = new Date();
setTimeout(function(){
  var end = new Date();
  console.log('多少秒之后才执行的setTimeout：', end - start, 'ms');
}, 500);
while(new Date() - start < 1000){}

如果按照多线程的思维定势，我们可能会觉得500毫秒之后函数就会执行，但是实际的结果可能会是：

多少秒之后才执行的setTimeout：1002 ms

如果要详细解释这个结果，我们可能还要看一下javascript中关于队列的解释。

因为javascript是单线程运行语言，所以当出现上面的代码运行的时候，javascript会先执行循环，把setTimeout事件放到事件队列里面，等待线程空闲，一旦线程空闲了，javascript会从事件队列中的底部堆栈中取出之前注册的事件执行，所以setTimeout会有很大的精度问题。