解決循環(huán)中setTimeout執(zhí)行順序的問題
期望：開始輸出一個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í) 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);
}
結(jié)果：開始輸出一個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)部沒有對i保持引用。
解決方法三：
for (var i = 0; i < 5; i++) {
setTimeout((function(i) {
console.log(i);
})(i), i * 1000);
}
結(jié)果：立馬輸出0-4。
原因：setTimeout可以接受函數(shù)或者字符串作為參數(shù)，而給setTimeout傳遞了一個立即執(zhí)行函數(shù)，該立即執(zhí)行函數(shù)是undefined ，也就是說等價于setTimeout(undefined, ...)。立即執(zhí)行函數(shù)會立即執(zhí)行。
以上這篇解決循環(huán)中setTimeout執(zhí)行順序的問題就是小編分享給大家的全部內(nèi)容了，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
JS實(shí)現(xiàn)表單中checkbox對勾選中增加邊框顯示效果
這篇文章主要介紹了JS實(shí)現(xiàn)表單中checkbox對勾選中增加邊框顯示效果,可實(shí)現(xiàn)點(diǎn)擊后圖片增加邊框及勾選的功能,非常簡潔實(shí)用,需要的朋友可以參考下2015-08-08
分享js粘帖屏幕截圖到web頁面插件screenshot-paste
這篇文章主要為大家分享了js粘帖屏幕截圖到web頁面插件screenshot-paste的相關(guān)資料，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-03-03
javascript之分片上傳，斷點(diǎn)續(xù)傳的實(shí)際項目實(shí)現(xiàn)詳解
在本篇文章里小編給大家整理了關(guān)于javascript之分片上傳，斷點(diǎn)續(xù)傳的實(shí)際項目實(shí)現(xiàn)的詳細(xì)內(nèi)容，有需要的朋友們學(xué)習(xí)下。2019-09-09
這篇文章主要為大家詳細(xì)介紹了如何簡單便捷的實(shí)現(xiàn)js間歇或無縫滾動效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-06-06
javascript實(shí)現(xiàn)點(diǎn)擊單選按鈕鏈接轉(zhuǎn)向?qū)?yīng)網(wǎng)址的方法
這篇文章主要介紹了javascript實(shí)現(xiàn)點(diǎn)擊單選按鈕鏈接轉(zhuǎn)向?qū)?yīng)網(wǎng)址的方法,涉及javascript鼠標(biāo)事件及頁面跳轉(zhuǎn)的相關(guān)技巧,簡單實(shí)用,具有一定參考借鑒價值,需要的朋友可以參考下2015-08-08
javascript實(shí)現(xiàn)網(wǎng)頁中涉及的簡易運(yùn)動（改變寬高、透明度、位置）
這篇文章主要介紹了javascript實(shí)現(xiàn)網(wǎng)頁中涉及的簡易運(yùn)動，比如改變寬高、透明度、位置等，感興趣的小伙伴們可以參考一下2015-11-11
微信小程序如何實(shí)現(xiàn)點(diǎn)擊圖片放大功能
這篇文章主要介紹了微信小程序如何實(shí)現(xiàn)點(diǎn)擊圖片放大功能,文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友可以參考下2020-01-01
下面小編就為大家?guī)硪黄钊肜斫鈐s數(shù)組的sort排序。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2016-05-05
UniApp使用manifest.json應(yīng)用配置的超詳細(xì)教學(xué)
這篇文章主要給大家介紹了關(guān)于uni-app應(yīng)用配置manifest.json最全最詳細(xì)配置,manifest.json文件是應(yīng)用的配置文件,用于指定應(yīng)用的名稱、圖標(biāo)、權(quán)限等,文中通過代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-01-01
詳解JavaScript中的強(qiáng)制類型轉(zhuǎn)換
這篇文章主要介紹了JavaScript中的強(qiáng)制類型轉(zhuǎn)換，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04