一道經典面試題-----setTimeout(function(){}，0)(轉)

一道經典面試題-----setTimeout(function(){}，0)

轉載： http://www.w3cfuns.com/notes/17398/e8a1ce8f863e8b5abb530069b388a158/page/3.html#tagsbar

先看題：

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

結果是：0 1 2 3 3 3 很多公司 面試都愛出這道題，此題考察的知識點還是蠻多的。 都考察了那些知識點呢？ 異步、作用域、閉包。 我們來簡化此題：

setTimeout(function() {
        console.log(1);
}, 0);
console.log(2);   //先打印2，再打印1

因為是setTimeout是異步的。
正確的理解setTimeout的方式(注冊事件)： 有兩個參數，第一個參數是函數，第二參數是時間值。 調用setTimeout時，把函數參數，放到事件隊列中。等主程序運行完，再調用。

就像我們給按鈕綁定事件一樣：

btn.onclick = function() {
        alert(1);
};

這么寫完，會彈出1嗎。不會！！只是綁定事件而已！ 必須等我們去觸發事件，比如去點擊這個按鈕，才會彈出1。

setTimeout也是這樣的！只是綁定事件，等主程序運行完畢后，再去調用。

setTimeout的時間值是怎么回事呢？

setTimeout(fn, 2000)

程序會不會報錯？ 不會！而且還會准確得打印1。為什么？ 因為真正去執行console.log(i)這句代碼時，var i = 1已經執行完畢了！

所以我們進行dom操作。可以先綁定事件，然后再去寫其他邏輯。

window.onload = function() {
        fn();
}
var fn = function() {
        alert('hello')
};

這么寫，完全是可以的。因為異步！

es5中是沒有塊級作用域的。

for (var i = 0; i < 3; i++) {}
console.log(i); //3，也就說i可以在for循環體外訪問到。所以是沒有塊級作用域。

這回我們再來看看原題。 原題使用了for循環。循環的本質是干嘛的？ 是為了方便我們 程序員，少寫重復代碼。

原題等價於：

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

因為setTimeout是注冊事件。根據前面的討論，可以都放在后面。
原題又等價於如下的寫法：

var i = 0;
console.log(i);
i++;
console.log(i);
i++;
console.log(i);
i++;
setTimeout(function() {
    console.log(i);
}, 0);
setTimeout(function() {
    console.log(i);
}, 0);
setTimeout(function() {
    console.log(i);
}, 0);  //彈出 0 1 2 3 3 3

怎么保證能彈出0，1， 2呢？

for (var i = 0; i < 3; i++) {
    setTimeout((function(i) {
        return function() {
            console.log(i);
        };
    })(i), 0);  //改為立即執行的函數
    console.log(i);  
}