解決循環(huán)中setTimeout執(zhí)行順序的問題

期望：開始輸出一個0，然后每隔一秒依次輸出1,2,3,4。

for (var i = 0; i < 5; i++) { 
 setTimeout(function() { 
 console.log(i); 
 }, 1000 * i); 
} 

結果：輸出5。

原因：setTimeout 使函數(shù)延遲1s執(zhí)行，而for循環(huán)執(zhí)行完成還不到0.1秒，到執(zhí)行函數(shù)的時候，其實 i 已經(jīng)變成5了，因此console.log(i)輸出5。

解決方法一：使用let塊作用域。

for (let i = 0; i < 5; i++) { 
 setTimeout(function() { 
 console.log(i); 
 }, 1000 * i); 
} 

解決方法二：加個閉包。

for (var i = 0; i < 5; i++) { 
 (function(i) { 
 setTimeout(function() { 
 console.log(i); 
 }, 1000 * i); 
 })(i); 
} 

結果：開始輸出一個0，然后每隔一秒依次輸出1,2,3,4。

失敗方法：

for (var i = 0; i < 5; i++) { 
 (function() { 
 setTimeout(function() { 
 console.log(i); 
 }, 1000 * i); 
 })(); 
} 

結果：輸出 5。

原因：去掉函數(shù)的參數(shù)i，則函數(shù)內部沒有對i保持引用。

解決方法三：

for (var i = 0; i < 5; i++) { 
 setTimeout((function(i) { 
 console.log(i); 
 })(i), i * 1000); 
} 

結果：立馬輸出0-4。

原因：setTimeout可以接受函數(shù)或者字符串作為參數(shù)，而給setTimeout傳遞了一個立即執(zhí)行函數(shù)，該立即執(zhí)行函數(shù)是undefined ，也就是說等價于setTimeout(undefined, ...)。立即執(zhí)行函數(shù)會立即執(zhí)行。

以上這篇解決循環(huán)中setTimeout執(zhí)行順序的問題就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

聲明：本網(wǎng)頁內容旨在傳播知識，若有侵權等問題請及時與本網(wǎng)聯(lián)系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com