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不被銷燬。spa

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

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

        也能夠這樣寫blog

         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...,就要對定時器時間設置io

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

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

      後續若是有補充,會繼續添加...for循環

相關文章
相關標籤/搜索