Javascript面試題講解-異步行為

JavaScript 使用 setTimeout 的異步步行為

介紹

在本文中，我們將探索一段引人入勝的 JavaScript 程式碼，它示範了該語言的非同步特性，特別是閉包和 setTimeout 函數如何協同工作。如果您曾經對循環輸出意外結果的原因感到困惑，那麼您來對地方了！

關鍵概念

在深入程式碼之前，我們先討論幾個概念。

非同步程式設計：

JavaScript 是單執行緒的，這表示它一次只能執行一段程式碼。但是，它可以處理非同步操作，允許某些任務在背景運行，同時主執行緒繼續執行。

設定超時時間

此函數用於在指定的延遲後執行一段程式碼。它需要兩個參數：回呼函數和以毫秒為單位的延遲。

閉包

閉包是一個保留對其詞法作用域的存取的函數，即使該函數是在該作用域之外執行的。這對於理解如何在非同步回調中存取變數至關重要。

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

在我們深入了解細節之前，請花點時間看看這個程式碼片段。嘗試根據您當前的理解來猜測輸出是什麼。這種方法不僅有助於增強您的 JavaScript 技能，而且還使接下來的解釋更有意義

想想 JavaScript 將如何處理每一行。一旦您做出猜測，請繼續閱讀，看看您是否猜對了！

解釋

讓我們逐步分解程式碼：

循環執行：循環運行五次，將 i 從 0 遞增到 4。

setTimeout：對於 i 的每個值，setTimeout 計劃在 i * 1000 毫秒後記錄 i。

關閉：當 setTimeout 回調執行時，循環已經完成，i 的最終值為 5。因此，所有回呼都將記錄 5。

你可能會排除什麼

0
1
2
3
4

實際發生了什麼

5
5
5
5
5

但是，這並不是您看到的實際輸出。原因是與 i 變數範圍相關的常見 JavaScript 行為。

在提供的程式碼中，i 變數是使用 var 宣告的，這表示它具有函數作用域。當 setTimeout() 函數執行時，循環已經完成，i 的值為 5。因此，所有 setTimeout() 函數都會將值 5 記錄到控制台，而不管延遲如何。

解決問題

達到預期輸出 0, 1, 2, 3, 4,

• 您可以使用立即呼叫函數表達式 (IIFE) 為每次迭代建立一個新作用域。
• 我們可以使用let關鍵字來取代var。

解決方案

立即呼叫函數表達式

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

現在，每個setTimeout都會捕獲i的當前值，輸出將是：

0
1
2
3
4

透過使用 Let 關鍵字

let 關鍵字建立一個區塊範圍變量，這意味著循環的每次迭代都將擁有自己的 i 變數副本，並且 setTimeout() 函數將為每次迭代捕獲 i 的正確值。

結論

了解 JavaScript 如何處理非同步操作和閉包對於編寫有效的程式碼至關重要。原始程式碼片段是 setTimeout 函數如何與循環變數 i 互動的一個很好的範例。透過使用 IIFE，我們可以確保每次逾時都記錄正確的值。因此，下次遇到類似情況時，請記住閉包的強大功能以及它們如何幫助您管理 JavaScript 中的異步行為

任務完成：解開密碼！

我希望這個解釋不僅能澄清程式碼，還能激發人們進一步探索的好奇心。 JavaScript 充滿了驚喜和強大的工具，您學習的每一部分都讓您更接近掌握它。

感謝您的閱讀

我希望你喜歡這個分解！請隨時在評論中分享您的想法、問題或對未來主題的想法。

快樂編碼

如果您喜歡這篇文章並想表達您的支持，請務必：

跟我來

以上是Javascript面試題講解-異步行為的詳細內容。更多資訊請關注PHP中文網其他相關文章！