前端面试的一个小问题

Question

昨天去一家公司面试前端，第二轮技术面给我出了一个题

var len=4;while(len--){
    setTimeout(function(){
        alert(len);
    },0);
    alert(len);
}

问输出结果当时有点蒙，自己不熟悉setTimeOut函数以为time为0就是立即调用，然后考官说setTimeOut是异步的，即使是0也会在最后执行，结果输出应该为3，2，1，0，-1，-1，-1，-1.后来又变了题目是：

var len=4;while(len--){
    (function(i){
        setTimeout(function(){
            alert(i);
        },0);
    })(len);
    alert(len);
}

这次我就很清楚了，产生一个闭包，每次len的变化i都保存了一个copy，所以输出是3，2，1，0，3，2，1，0.但是刚才写demo的时候发现第一段代码的输出符合预期，第二段的输出开始4个是3，2，1，0但是后面的也就是setTimeout中的输出有时候都不一样，有时是0，2，1，3有时是2，1，0，3等等求解释。

Answer 1

其实第二个题目的答案确实一定是：32103210。之所以后面四个 alert 输出 的结果有不确定性，和 setTimeout 以及延迟时间 都没有关系，是因为，alert 会阻塞浏览器的执行线程，而所有阻塞执行线程的方式，都会让setTimeout的结果具有不确定性。（即便setTimeout的延迟时间为0，回调函数也是严格的压入队列栈中的，按照FIFO的顺序依次调用。）比如，打开调试工具，设置断点，如果执行到延时回调函数中断点生效了，这时，代码中的 setTimeout setInterval 等结果也都会受到影响。遇到这种情况，最好的方式（比如此处），尽量使用【console.log】输出结果，这样只会将对象打印到控制台，而不会影响时间性和顺序。

Answer 2

前边那个你理解了？那我只说后边那个——闭包。 (function(i){ setTimeout(function(){ alert(i); },0); })(len);这里创建了一个函数并立即调用了，函数的参数 i 被设置成 len 现在的值，然后它就不改了。所以它 alert 的值是 0-3 而不是 -1。至于顺序，都是延时 0 毫秒执行，所以顺序是乱的。