首頁 web前端 js教程 為什麼 JavaScript `for` 循環中嵌套的 `setTimeout` 會列印不連續的值?

為什麼 JavaScript `for` 循環中嵌套的 `setTimeout` 會列印不連續的值?

Dec 15, 2024 pm 03:32 PM

Why Does Nested `setTimeout` in a JavaScript `for` Loop Print Non-Consecutive Values?

理解問題:嵌套在for 循環中的setTimeout 中的非連續值列印

在JavaScript 中,像setTimeout 這樣的非同步函數會安排回調延遲後執行。當放置在循環中時,這可能會導致意外行為,其中回調存取的變數可能與循環的狀態不同步。

範例:警告不正確的值

考慮提供的腳本:

1

2

3

for (var i = 1; i <= 2; i++) {

    setTimeout(function() { alert(i) }, 100);

}

登入後複製

此程式碼旨在連續警告值1 和2,而是輸出3 兩次。原因在於 setTimeout 的非同步特性,它建立了一個引用 i 目前值的回呼。

在沒有函數字串的情況下傳遞i

來解決這個問題為了確保連續的值打印,我們需要為每個setTimeout 回調創建一個不同的i 實例。這是一個解決方案:

1

2

3

4

5

6

7

8

function doSetTimeout(i) {

  setTimeout(function() {

    alert(i);

  }, 100);

}

 

for (var i = 1; i <= 2; ++i)

  doSetTimeout(i);

登入後複製

透過為每個回調建立一個明確函數並將 i 作為參數傳遞,我們為循環的每次迭代建立 i 的單獨副本。這允許回調在執行時引用 i 的正確值,確保 1 和 2 的連續列印。

以上是為什麼 JavaScript `for` 循環中嵌套的 `setTimeout` 會列印不連續的值?的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
兩個點博物館:所有展覽以及在哪裡可以找到它們
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章

倉庫:如何復興隊友
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
3 週前 By 尊渡假赌尊渡假赌尊渡假赌
兩個點博物館:所有展覽以及在哪裡可以找到它們
3 週前 By 尊渡假赌尊渡假赌尊渡假赌

熱門文章標籤

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

在JavaScript中替換字符串字符 在JavaScript中替換字符串字符 Mar 11, 2025 am 12:07 AM

在JavaScript中替換字符串字符

jQuery檢查日期是否有效 jQuery檢查日期是否有效 Mar 01, 2025 am 08:51 AM

jQuery檢查日期是否有效

jQuery獲取元素填充/保證金 jQuery獲取元素填充/保證金 Mar 01, 2025 am 08:53 AM

jQuery獲取元素填充/保證金

10個jQuery手風琴選項卡 10個jQuery手風琴選項卡 Mar 01, 2025 am 01:34 AM

10個jQuery手風琴選項卡

10值得檢查jQuery插件 10值得檢查jQuery插件 Mar 01, 2025 am 01:29 AM

10值得檢查jQuery插件

HTTP與節點和HTTP-Console調試 HTTP與節點和HTTP-Console調試 Mar 01, 2025 am 01:37 AM

HTTP與節點和HTTP-Console調試

jQuery添加捲軸到Div jQuery添加捲軸到Div Mar 01, 2025 am 01:30 AM

jQuery添加捲軸到Div

自定義Google搜索API設置教程 自定義Google搜索API設置教程 Mar 04, 2025 am 01:06 AM

自定義Google搜索API設置教程

See all articles