setTimeout異步加載

兩道經典的面試題，直接上代碼

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

會輸出什么呢？先想一想，記下答案。繼續下一題

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

改動很少，結果卻相差甚遠。先公布正確答案，第一段代碼輸出：1,2,4,8； 第二段代碼輸出：3，6,12,24。

意不意外？刺不刺激？驚不驚喜？

【代碼解析】

　　首先，不要被定時器干擾，誤以為它有延遲才會導致這樣的結果，你可以嘗試把延遲改成“0”或者去掉不寫，結果依然相同。

　　引入一個概念-->異步，脫離當前事件隊列的處理程序，而且必須等到正常隊列里的事件完成后才會執行。

　   再來分析以上代碼，

　　　　　第一個，看到setTimeout，就知道知道它會在代碼塊的for循環及最后一個console.log完成后才執行，而且執行三次。毫無疑問，會先輸出1，此時 i 的值為 1，再開始執行setTimeout進程，分別輸出2,4,8.

　　　　   第二個，需要對閉包有一定理解，js中的for循環是不存在私有作用域的，所以for循環最后結束時 i = 3,然后再執行setTimeout，依次是6,12，24.