Bagaimana untuk Mengelakkan Isu Skop Pembolehubah Gelung Asynchronous JavaScript?

Pemprosesan Tak Segerak Dalam JavaScript untuk Gelung: Menangani Isu Skop Pembolehubah

Apabila melaksanakan gelung peristiwa dalam gelung for yang menggunakan proses tak segerak , adalah perkara biasa untuk menghadapi masalah di mana fungsi panggil balik mendapatkan semula nilai yang salah untuk gelung pembolehubah i. Tingkah laku ini berpunca daripada fakta bahawa gelung melengkapkan lelarannya sebelum operasi tak segerak selesai. Akibatnya, panggilan balik semuanya merujuk kepada nilai akhir i.

Strategi Mitigasi

Terdapat beberapa strategi untuk menangani isu ini dan memastikan setiap panggilan balik menerima nilai yang betul bagi i:

1. Menggunakan Penutupan Fungsi

Dengan menggunakan penutupan fungsi, anda boleh menangkap nilai i secara unik untuk setiap lelaran. Ini boleh dicapai melalui penutupan fungsi sebaris tanpa nama:

someArray.forEach((item, i) => {
  asynchronousProcess(() => {
    console.log(i);
  });
});

2. Menggunakan Fungsi Luaran

Anda boleh mencipta fungsi luaran yang menguruskan nilai unik i untuk setiap lelaran. Fungsi ini boleh dihantar sebagai hujah kepada proses tak segerak:

const j = 10;
for (let i = 0; i < j; i++) {
  (function(cntr) {
    asynchronousProcess(cntr, (result) => {
      console.log(result); // cntr will hold the correct value of i
    });
  })(i);
}

3. Menggunakan ES6 let

Jika persekitaran anda menyokong ES6, kata kunci let boleh digunakan dalam pengisytiharan gelung for untuk mencipta nilai unik i bagi setiap lelaran:

const j = 10;
for (let i = 0; i < j; i++) {
  asynchronousProcess(() => {
    console.log(i);
  });
}

4. Mensiri dengan Janji dan async/menunggu

Pendekatan ini melibatkan penyirian operasi tak segerak untuk dijalankan secara berurutan dan bukannya selari. Menggunakan async/menunggu dan mengembalikan janji daripada proses tak segerak memastikan bahawa hanya satu operasi aktif pada satu masa. Walau bagaimanapun, ia memerlukan persekitaran moden yang menyokong ciri ini:

async function someFunction() {
  const j = 10;
  for (let i = 0; i < j; i++) {
    await asynchronousProcess();
    console.log(i);
  }
}

5. Perlaksanaan Selari dengan Promise.all()

Jika matlamatnya adalah untuk menjalankan operasi tak segerak secara selari tetapi masih mengumpul keputusan dalam susunan gelung, Promise.all() boleh digunakan:

async function someFunction() {
  const promises = [];
  for (let i = 0; i < 10; i++) {
    promises.push(asynchronousProcessThatReturnsPromise());
  }
  return Promise.all(promises);
}

someFunction().then((results) => {
  console.log(results); // array of results in order
});

Atas ialah kandungan terperinci Bagaimana untuk Mengelakkan Isu Skop Pembolehubah Gelung Asynchronous JavaScript?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!