for循環,定時器,閉包混合一塊的那點事。


    1,對於一個基本的for循環,順序輸出變量值。

        for(var i = 1; i < 4; i++){
            console.log(i);//結果不多說了吧
        }

    2,如果for循環中有定時器,如下代碼。

        for (var i = 1; i < 4; i++) {
            setTimeout(function() {
                console.log(i);//3個4
            }, 3000);
        }

        初衷想要3s后輸出1,2,3。但是3s后,輸出3個4。原因是定時器的異步執行,for循環的執行速度很快,當真正執行到函數體時,此時i早已變成4,所以結果不想而知。

    3,如果要得到正確結果,就要引入閉包來保存變量i不被銷毀。

        for (var i = 1; i < 4; i++) {
            (function(a) {
                setTimeout(function() {
                    console.log(a);//操縱變量a,和i無關
                }, 3000);
            })(i)
        }

        這樣引入閉包,變量i保存下來,3s后函數體執行,輸出1,2,3.

        也可以這樣寫

         for (var i = 1; i < 4; i++) {
             setTimeout(fn(i), 3000);
         }
         function fn(a){
             return function(){
                 console.log(a);
             }
         }

    4,如果要實現,沒隔3s輸出一個數字,即,3s輸出1,3s后再輸出2...,就要對定時器時間設置

        for (var i = 1; i < 4; i++) {
            (function(a) {
                setTimeout(function() {
                    console.log(a);
                }, a*3000); //.....
            })(i)
        }

       實際上,for循環很快,上述代碼類似於同時啟動3個定時器,只需要確保時間不一樣即可。在此,時間分別是3s,6s,9s,由於同時啟動,但是執行時間不同,各個時間間隔都是3s。巧妙地達到了目的。

      后續如果有補充,會繼續添加...

 


免責聲明!

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



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