Bagaimana untuk Melaksanakan Fungsi Tunggu dalam JavaScript untuk Tugas Asynchronous?

Masa Kelewatan dalam JavaScript

Memahami kelewatan pemasaan dalam JavaScript adalah penting untuk membina aplikasi web yang responsif dan cekap. Dalam artikel ini, kami akan menangani masalah menunggu masa tertentu sebelum melaksanakan baris kod.

Isunya:

Pemaju JavaScript yang baru ditemui isu di mana fungsi tidak menunggu seperti yang dimaksudkan sebelum menilai keadaan. Tingkah laku yang dijangkakan ialah menunggu selama 5 saat sebelum menyemak sama ada keadaan tertentu telah berubah. Walau bagaimanapun, fungsi semasa menyemak serta-merta dan bukannya menunggu.

Penyelesaian:

Untuk mencapai tingkah laku yang diingini ini, kita boleh menggunakan pendekatan berikut:

Pelayar:

Menggunakan sintaks async/menunggu moden (tersedia dalam penyemak imbas yang menyokong ECMAScript 6 dan ke atas), kami boleh menggunakan penyelesaian berikut:

<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>

Pendekatan ini memudahkan kod dengan menjadikannya kelihatan segerak, walaupun dilaksanakan secara tidak segerak.

Node.js:

Untuk Node.js versi 16 dan ke atas, kami boleh memanfaatkan fungsi setTimeout berasaskan janji terbina dalam:

<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>

Awas:

Adalah penting untuk ambil perhatian bahawa menggunakan fungsi kelewatan untuk mengelakkan keadaan perlumbaan (terutamanya apabila menguji tak segerak kod) harus dilakukan dengan berhati-hati, kerana ia selalunya boleh membawa kepada penyelesaian yang tidak optimum.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Fungsi Tunggu dalam JavaScript untuk Tugas Asynchronous?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!