解決循環(huán)中setTimeout執(zhí)行順序的問(wèn)題
期望：開(kāi)始輸出一個(gè)0，然后每隔一秒依次輸出1,2,3,4。
for (var i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000 * i);
}
結(jié)果：輸出5。
原因：setTimeout 使函數(shù)延遲1s執(zhí)行，而for循環(huán)執(zhí)行完成還不到0.1秒，到執(zhí)行函數(shù)的時(shí)候，其實(shí) i 已經(jīng)變成5了，因此console.log(i)輸出5。
解決方法一：使用let塊作用域。
for (let i = 0; i < 5; i++) {
setTimeout(function() {
console.log(i);
}, 1000 * i);
}
解決方法二：加個(gè)閉包。
for (var i = 0; i < 5; i++) {
(function(i) {
setTimeout(function() {
console.log(i);
}, 1000 * i);
})(i);
}
結(jié)果：開(kāi)始輸出一個(gè)0，然后每隔一秒依次輸出1,2,3,4。
失敗方法：
for (var i = 0; i < 5; i++) {
(function() {
setTimeout(function() {
console.log(i);
}, 1000 * i);
})();
}
結(jié)果：輸出 5。
原因：去掉函數(shù)的參數(shù)i，則函數(shù)內(nèi)部沒(méi)有對(duì)i保持引用。
解決方法三：
for (var i = 0; i < 5; i++) {
setTimeout((function(i) {
console.log(i);
})(i), i * 1000);
}
結(jié)果：立馬輸出0-4。
原因：setTimeout可以接受函數(shù)或者字符串作為參數(shù)，而給setTimeout傳遞了一個(gè)立即執(zhí)行函數(shù)，該立即執(zhí)行函數(shù)是undefined ，也就是說(shuō)等價(jià)于setTimeout(undefined, ...)。立即執(zhí)行函數(shù)會(huì)立即執(zhí)行。
以上這篇解決循環(huán)中setTimeout執(zhí)行順序的問(wèn)題就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本文給大家介紹JS正則表達(dá)式比較常見(jiàn)用法，涉及到j(luò)s正則表達(dá)式用法相關(guān)知識(shí)，感興趣的朋友一起學(xué)習(xí)吧2016-01-01
JS實(shí)現(xiàn)元素的拖動(dòng)與占位功能
這篇文章主要介紹了JS實(shí)現(xiàn)元素的拖動(dòng)與占位功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2021-11-11
實(shí)用javaScript技術(shù)-屏蔽類(lèi)
實(shí)用javaScript技術(shù)-屏蔽類(lèi)...2006-08-08
JavaScript深入V8引擎以及編寫(xiě)優(yōu)化代碼的5個(gè)技巧
這篇文章主要介紹了JavaScript深入V8引擎以及編寫(xiě)優(yōu)化代碼的5個(gè)技巧,JavaScript引擎是執(zhí)行 JavaScript 代碼的程序或解釋器。JavaScript引擎可以實(shí)現(xiàn)為標(biāo)準(zhǔn)解釋器，或者以某種形式將JavaScript編譯為字節(jié)碼的即時(shí)編譯器。,需要的朋友可以參考下2019-06-06
最近在學(xué)習(xí)微信小程序，下面就學(xué)習(xí)的內(nèi)容進(jìn)行總結(jié)，這篇文章主要給大家介紹了關(guān)于微信小程序利用co處理異步流程的方法，文中給出了詳細(xì)的介紹和示例代碼供大家參考學(xué)習(xí)，需要的朋友們下面來(lái)一起看看吧。2017-05-05
用js獲取文件目錄的代碼，一般主要是用了區(qū)別vbs的一些代碼2008-11-11
有時(shí)候定義的函數(shù)需要設(shè)置默認(rèn)值，因?yàn)椴粠Ь蜁?huì)出現(xiàn)一些錯(cuò)誤，大家可以參考下這里默認(rèn)值的定義方法。2010-05-05
原生javascript實(shí)現(xiàn)自動(dòng)更新的時(shí)間日期
這篇文章主要介紹了原生javascript實(shí)現(xiàn)自動(dòng)更新的時(shí)間日期的相關(guān)資料，對(duì)實(shí)現(xiàn)代碼進(jìn)行詳細(xì)分析，感興趣的朋友可以參考一下2016-02-02
javascript 瀏覽器類(lèi)型和版本號(hào)檢測(cè)代碼(兼容多瀏覽器)
果對(duì)javascript了解不是特別深入的話(huà),很容易就會(huì)寫(xiě)出不兼容的代碼(就像我),這時(shí)候就得判斷瀏覽器了。比如事件偵聽(tīng)、一些鼠標(biāo)和鍵盤(pán)事件、Range等,一些都會(huì)不一樣.下面列出幾種常用的檢測(cè)瀏覽器方法，以饗觀眾!2010-04-04
一般情況下我們用js設(shè)置元素對(duì)象的樣式會(huì)使用這樣的形式2009-08-08