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