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.

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM