當js中的for迴圈遇到延時器或者定時器時需要注意的問題
阿新 • • 發佈:2019-01-29
當你在for迴圈裡寫if判斷,再加延時器或者定時器時,一定要儲存當前的i的值,再做處理,否則你拿到的i的值會是for迴圈裡最大的那個;
看demo
for (var i = 0; i < 10; i++) {
if(i == 5){
setTimeout(aa,2000);
function aa(){
console.log( "i="+i);
}
}
}
你們覺得會打印出i的值是幾?
最終結果會是10!
延時器換做定時器, 最終結果也是一樣的;
那麼為什麼呢?
js讀取程式碼是從上向下讀取的,當它讀取到i滿足if語句的時候並不是停止了,還會繼續做迴圈判斷;而此時if語句裡面是一個延時器,當延時器的延時時間結束要呼叫aa函式的時候,for迴圈已經迴圈結束,而此時的i已經變為10;
所以打印出來i的值就會是10;
那麼怎麼解決這個問題呢?看程式碼
var j = null;
for (var i = 0; i < 10; i++) {
if(i == 5){
j = i;
setTimeout(aa,2000);
function aa(){
console.log( "i="+j);
}
}
}
這樣打印出來的就是我們想要的結果了,沒錯就是5;
原理就是當滿足if語句時,我們用一個變數把當前i的值儲存下來;