1. 程式人生 > >當js中的for迴圈遇到延時器或者定時器時需要注意的問題

當js中的for迴圈遇到延時器或者定時器時需要注意的問題

當你在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的值儲存下來;