Javascript menunggu loop selesai

Sebelum melakukan sihir asinkron dengan loop, saya ingin mengingatkan Anda bagaimana kami menulis loop sinkron klasik

😐 Putaran sinkron

Dahulu kala saya menulis loop seperti ini (mungkin Anda juga)

for (var i=0; i < array.length; i++) {
  var item = array[i];
  // do something with item
}

Itu bagus, cepat, tetapi memiliki banyak masalah keterbacaan dan pemeliharaan. Kemudian saya biasa menggunakan versi yang lebih baik

array.forEach((item) => {
  // do something with item
});

Bahasa JavaScript berkembang sangat cepat. Kami memiliki lebih banyak fitur dan sintaks baru. Salah satu favorit saya adalah async/menunggu. Saya menggunakannya lebih sering sekarang. Dan terkadang saya mengalami situasi di mana saya perlu melakukan sesuatu dengan item dalam array secara tidak sinkron

🤗 Loop asinkron

Bagaimana cara menggunakan menunggu di dalam satu lingkaran?

async function processArray(array) {
  array.forEach(item => {
    // define synchronous anonymous function
    // IT WILL THROW ERROR!
    await func(item);
  })
}

Kode ini akan menimbulkan kesalahan sintaksis. Mengapa? . Seperti yang Anda lihat "processArray" adalah fungsi async. Tetapi fungsi anonim yang kami gunakan untuk forEach sinkron

🤔 1. Jangan menunggu hasil

Bagaimana cara memperbaiki masalah sebelumnya?

async function processArray(array) {
  array.forEach(async (item) => {
    await func(item);
  })
  console.log('Done!');
}

Tapi forEach tidak akan menunggu sampai semua item selesai. Itu hanya akan menjalankan tugas dan melanjutkan. Sebagai bukti mari kita tulis tes sederhana

function delay() {
  return new Promise(resolve => setTimeout(resolve, 300));
}

async function delayedLog(item) {
  // notice that we can await a function
  // that returns a promise
  await delay();
  console.log(item);
}
async function processArray(array) {
  array.forEach(async (item) => {
    await delayedLog(item);
  })
  console.log('Done!');
}

processArray([1, 2, 3]);

Outputnya akan

Done!
1
2
3

Tidak apa-apa jika Anda tidak perlu menunggu hasilnya. Tetapi dalam hampir semua kasus, ini bukanlah logika yang baik

👊 2. Array proses secara berurutan

Untuk menunggu hasilnya kita harus kembali ke “for loop” jadul, tapi kali ini kita bisa menggunakan versi modern dengan for. konstruksi (terima kasih kepada Protokol Iterasi) untuk keterbacaan yang lebih baik

async function processArray(array) {
  for (const item of array) {
    await delayedLog(item);
  }
  console.log('Done!');
}

Ini akan memberi kita hasil yang diharapkan

1
2
3
Done!

Kode akan menangani setiap item satu per satu secara berurutan. Tapi kita bisa menjalankannya secara paralel

💪 3. Proses array secara paralel

Kami dapat sedikit mengubah kode untuk menjalankan operasi async secara paralel

async function processArray(array) {
  // map array to promises
  const promises = array.map(delayedLog);
  // wait until all promises are resolved
  await Promise.all(promises);
  console.log('Done!');
}

Kode ini akan menjalankan banyak delayLog tugas secara paralel. Tapi hati-hati dengan array yang sangat besar (terlalu banyak tugas secara paralel bisa jadi terlalu berat untuk CPU atau memori)

Juga jangan bingung "paralel" di sini dengan utas asli dan paralel. Kode itu tidak akan menjamin paralelisme eksekusi yang nyata. Itu tergantung pada fungsi item Anda (

array.forEach((item) => {
  // do something with item
});

Bagaimana Anda menunggu loop berakhir?

Apakah JavaScript menunggu fungsi selesai?

Bagaimana cara menjeda loop dalam JavaScript?

Bagaimana cara menggunakan await inside for loop di JavaScript?