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。巧妙地達到了目的。
后續如果有補充,會繼續添加...
