如何在 JavaScript 中實作非同步任務的等待函數？

JavaScript 中的時序延遲

理解 JavaScript 中的時序延遲對於建立響應迅速且高效的 Web 應用程式至關重要。在本文中，我們將解決在執行一行程式碼之前等待特定時間的問題。

問題：

JavaScript 開發新手遇到函數在評估條件之前未如預期等待的問題。預期行為是等待 5 秒，然後再檢查某個狀態是否已更改。但是，當前函數會立即檢查而不是等待。

解決方案：

要實現此所需的行為，我們可以利用以下方法：

瀏覽器：

使用現代的async/await 語法（在支援ECMAScript 6 及更高版本的瀏覽器中可用），我們可以採用以下解決方案：

<code class="javascript">const delay = ms => new Promise(res => setTimeout(res, ms));

async function yourFunction() {
  await delay(5000);
  console.log("Waited 5s");

  await delay(5000);
  console.log("Waited an additional 5s");
}</code>

這種方法透過使其看起來同步來簡化程式碼，儘管是非同步執行的。

Node.js:

對於Node.js 版本16 及更高版本，我們可以利用內建基於Promise 的setTimeout 函數：

<code class="javascript">import { setTimeout } from "timers/promises";

async function yourFunction() {
  await setTimeout(5000);
  console.log("Waited 5s");

  await setTimeout(5000);
  console.log("Waited an additional 5s");
}</code>

注意：

需要注意的是，使用延遲函數可以避免競爭條件（尤其是在測試異步時）代碼）應謹慎執行，因為它通常會導致次優的解決方案。

以上是如何在 JavaScript 中實作非同步任務的等待函數？的詳細內容。更多資訊請關注PHP中文網其他相關文章！