JavaScript 中的非同步循環

雖然JavaScript 提供了各種類型的循環，但可以建立暫停執行以等待非同步呼叫的循環具有挑戰性的。這是因為混合同步和非同步程式碼可能會導致意外行為。

解決方案：採用非同步方法

要克服此限制，有必要完全擁抱事件JavaScript 驅動的方法。這涉及使用非同步呼叫完成時將調用的函數。呼叫回調後，循環可以繼續執行。

引入 asyncLoop 函數

可以建立一個名為 asyncLoop 的輔助函數來促進這種非同步循環行為。它需要三個參數：

• iterations：循環應運行的次數。
• func：每次迭代中執行的函數。
• callback：循環完成時呼叫的函數。

asyncLoop 函數維護一個內部變數索引來追蹤當前迭代，並標記一個 did 變數來指示循環何時完成。在這個函數中，有一個內部循環物件提供以下方法：

• next()：使循環前進一次迭代。
• iteration()：傳回目前迭代。
• break()：提前終止迴圈。

要啟動循環，將會呼叫loop.next()。每次呼叫 func 函數時，可以呼叫loop.next() 繼續循環，或呼叫loop.break() 終止循環。

用法範例：

以下範例示範如何使用asyncLoop 函式建立非同步循環：

asyncLoop(10, (loop) => {
  someFunction(1, 2, (result) => {
    console.log(loop.iteration());
    loop.next();
  });
}, () => {
  console.log('cycle ended');
});

此程式碼將非同步執行 someFunction 10 次，並在控制台中記錄迭代次數。循環完成時將列印循環結束訊息。

透過利用這種方法，JavaScript 開發人員可以創建在事件驅動環境中無縫工作的非同步循環，避免阻塞腳本和瀏覽器的潛在問題。