js发现个奇怪的问题

Question

for(let i=0;i<5;i++){
    setTimeout(function(){alert(i)},0)

  }
  
  这个输出的顺序是0,1,3,2,4
  不是0,1,2,3,4吗？

Answer 1

这个问题充分的体现了javascript单线程的特性

涉及的要点：

setTimeout向执行队列依次添加执行函数
let的局部作用域
alert 阻塞

首先，上述程序可以分解为以下的运行情况

这里将原问题修改为以下便于理解

for(let i=0;i<5;i++){
    setTimeout(function(){
        alert(i);
    },1000)
}

这是形成的队列

function _fun0() {
    alert(0);
}
function _fun1() {
    alert(1);
}
function _fun2() {
    alert(2);
}
function _fun3() {
    alert(3);
}
function _fun4() {
    alert(4);
}

假如将 alert 换做是 console.log那么问题就简单多了，控制台会依次的打印: 0,1,2,3,4。因为 console.log不会阻塞程序的运行

由于 alert 会阻塞程序的运行，假如等待2秒钟点击警告的确定按钮，导致延长该函数的时间线，执行 _fun1的时候本来花费的时间可以忽略不计，程序等待1秒中就可以执行 _fun2 ，但等待2秒之后，可以理解为超时，程序会直接跳过_fun2，而直接执行_fun3。以此类推。
之后的轮询再来处理剩下未执行的代码。

问题中 setTimeout(() => {}, 0)，虽然时间间隔被设置为0，但是还是会有4ms的延迟，所以可以同上述一样理解

参考 《Javascript高级程序第三版》第22章 高级定时器

这个问题很好，但是却被减了两票，可惜了！

Answer 2

猜测原因跟alert有关，alert会阻塞JS执行
以下代码不关闭alert永远不会打印b

alert("a");
console.log("b");

所以把alert换成console.log试下

Answer 3

0,4,3,2,1, 我刚测试的

Answer 4

我理解的是应该弹出5，谷歌43测试结果也是5。
setTimeout会异步执行js。

for(var i=0;i<5;i++){
    setTimeout(function(){
        alert(i);
    },1000)
}

代码中，每一次循环，setTimeout都会把alert事件放在事件队列，等循环完之后（主线程），i=5，再执行队列中的js，这时候i已经是5了

Answer 5

for(var i=0;i<5;i++){

setTimeout((function(){
    alert(i);
})(),1000)

}
输出 0，1，2，3，4