Jalankan beberapa baris dengan setTimeout dan sebuah janji, dan urutan keluarannya mungkin akan mengejutkan Anda. Perulangan peristiwa JavaScript menjelaskan alasannya. Ini adalah mekanisme yang memungkinkan bahasa thread tunggal menangani pengatur waktu, panggilan jaringan, dan klik tanpa terhenti.

Setelah Anda memahaminya, seluruh kumpulan bug yang membingungkan mulai masuk akal. Kami menjalankan setiap contoh di Node.js 24, dan output berasal dari proses tersebut. Aturan pengurutan inti juga berlaku di browser, dan kami menunjukkan perbedaan Node.js. Anda akan mendapatkan lebih banyak manfaat dari ini jika Anda sudah mengetahui dasar-dasar janji JavaScript.

Mengapa event loop ada

JavaScript mengeksekusi kode Anda pada satu thread utama, jadi hanya satu bagian saja yang berjalan dalam satu waktu. Jika hanya menunggu permintaan jaringan, halaman akan terhenti hingga respons muncul kembali.

Jadi JavaScript tidak menunggu. Pekerjaan yang lambat diserahkan ke lingkungan host, artinya browser atau Node.js, yang dapat menanganinya di latar belakang. Ketika pekerjaan itu selesai, panggilan balik ditempatkan dalam antrian. Tugas perulangan peristiwa adalah memindahkan panggilan balik yang antri ke tumpukan saat bebas.

Bayangkan seorang koki yang bekerja sendirian. Koki memasukkan hidangan ke dalam oven dan menyetel pengatur waktu, alih-alih menatapnya. Saat penghitung waktu berbunyi, tugas masuk ke dalam daftar, dan koki mengambilnya setelah menyelesaikan apa yang ada di tangannya.

Bagian yang bergerak

Tugas terkadang disebut tugas makro. Sebenarnya, mungkin ada beberapa sumber tugas, dan detail pastinya berbeda antar lingkungan.

Aturannya

1. Jalankan semua kode sinkron hingga tumpukan panggilan kosong.
2. Jalankan semua tugas mikro, termasuk tugas mikro baru yang ditambahkan selama proses.
3. Di browser, render pembaruan jika sudah waktunya.
4. Ambil satu tugas dari antrian dan jalankan.
5. Kembali ke langkah 2.

Detail terpenting: semua tugas mikro, lalu satu tugas. Sebagian besar teka-teki perulangan peristiwa diselesaikan dengan menerapkan aturan tunggal tersebut.

Lihat pesanannya

console.log("1 sync");
setTimeout(() => console.log("5 timeout"), 0);
Promise.resolve().then(() => console.log("3 promise"));
queueMicrotask(() => console.log("4 microtask"));
console.log("2 sync");

// 1 sync
// 2 sync
// 3 promise
// 4 microtask
// 5 timeout

Inilah yang terjadi. Kedua jalur console.log bersifat sinkron, sehingga dijalankan terlebih dahulu. Panggilan balik janji dan queueMicrotask masuk ke antrian tugas mikro, dan dijalankan segera setelah tumpukan kosong, sesuai urutan penambahannya. Callback pengatur waktu harus menunggu giliran tugas, meskipun penundaannya nol.

Tugas mikro dijalankan di antara pengatur waktu

Setelah setiap tugas, antrean tugas mikro dikosongkan lagi. Contoh ini membuktikannya:

setTimeout(() => {
  console.log("timer 1");
  Promise.resolve().then(() => console.log("promise inside timer 1"));
}, 0);
setTimeout(() => console.log("timer 2"), 0);

// timer 1
// promise inside timer 1
// timer 2

Janji, yang dibuat pada pengatur waktu pertama, berjalan sebelum pengatur waktu kedua. Browser modern dan Node.js 11 dan yang lebih baru berperilaku seperti ini.

Dimana menunggu cocok

await membagi fungsi menjadi dua. Segala sesuatu sebelum berjalan secara sinkron, dan segala sesuatu setelahnya dijadwalkan sebagai tugas mikro. Hal ini mengejutkan banyak orang:

async function task() {
  console.log("A before await");
  await null;
  console.log("C after await");
}

task();
console.log("B after calling task");

// A before await
// B after calling task
// C after await

Fungsi async tidak dimulai di latar belakang. Ini berjalan di thread yang sama hingga mencapai thread pertamanya await. Hal itu pun berlaku ketika menunggu sesuatu yang bukan janji nyata, seperti null. Lihat Panduan async/await JavaScript kami untuk mengetahui lebih lanjut tentang sintaksis ini.

Memblokir loop

Saat kode sinkron berjalan, tidak ada hal lain yang bisa. Untuk menunjukkan hal ini, kami menyetel timer ke 0 ms, lalu membiarkan thread sibuk selama setengah detik:

const start = Date.now();
setTimeout(() => console.log("timer ran after", Date.now() - start, "ms"), 0);
while (Date.now() - start < 500) {}

// timer ran after about 500 ms

Penundaan pengatur waktu adalah minimum, bukan jaminan. Itu berjalan hanya ketika tumpukan menjadi bebas. Pada halaman web, loop panjang seperti ini berarti klik tidak merespons dan animasi berhenti. Di server, setiap permintaan lainnya harus menunggu, itulah sebabnya satu panggilan sinkron yang lambat dapat merugikan semua pengguna proses Node.js.

Penyebab umum pemblokiran mencakup loop besar, penguraian JSON yang sangat besar, fungsi file sinkron seperti readFileSync dalam penangan permintaan, dan ekspresi reguler yang sangat buruk.

Tetap responsif

Untuk pekerjaan berat, berikan kesempatan pada loop acara untuk bernafas. Salah satu caranya adalah dengan sesekali menjeda pengatur waktu, yang memungkinkan tugas lain berjalan:

const items = [0, 1, 2, 3, 4];

async function processAll() {
  for (const item of items) {
    if (item === 2) await new Promise((r) => setTimeout(r, 0));
    console.log("item", item);
  }
}

setTimeout(() => console.log("other work gets a turn"), 0);
processAll();

// item 0
// item 1
// other work gets a turn
// item 2
// item 3
// item 4

Pengatur waktu yang lain berjalan di tengah-tengah, karena kami menyerah dengan tugas yang sebenarnya. Kode sebenarnya akan menghasilkan banyak item atau milidetik. Untuk pekerjaan yang benar-benar membutuhkan CPU, seperti pemrosesan gambar, gunakan Web Worker di browser atau thread pekerja di Node.js, yang berjalan di thread terpisah.

Kelaparan tugas mikro

Karena loop mengosongkan antrian tugas mikro sepenuhnya sebelum melanjutkan, tugas mikro yang membuat penjadwalan lebih banyak dapat menghentikan semuanya. Kami mengujinya dengan 100.000 tugas mikro berantai:

let count = 0;
let timerFired = false;
setTimeout(() => { timerFired = true; }, 0);

function spin() {
  count++;
  if (count < 100000) queueMicrotask(spin);
  else console.log("timer fired during microtasks?", timerFired);
}
queueMicrotask(spin);

// timer fired during microtasks? false

Pengatur waktu tidak dapat berjalan sampai semuanya selesai. Jika rantai itu tidak pernah berakhir, pengatur waktu tidak akan pernah menyala, dan di browser, halaman tersebut tidak akan pernah dicat ulang. Perhatikan bahwa menyerah dengan await pada janji yang diselesaikan tidak membantu di sini, karena itu hanya menambah tugas mikro lainnya. Anda memerlukan tugas nyata, seperti pengatur waktu, untuk memberi giliran kepada orang lain.

Rendering di browser

Browser biasanya mendapat kesempatan untuk melukis di antara tugas-tugas. Itu menjelaskan bug umum:

spinner.hidden = false;
doHeavyWork();              // blocks the thread
spinner.hidden = true;

Pemintal tidak pernah muncul, karena browser tidak mempunyai kesempatan untuk merender yang tersirat di antara baris-baris tersebut. Untuk memperbaikinya, biarkan kerangka lewat sebelum pekerjaan berat dimulai, atau pindahkan pekerjaan tersebut ke pekerja. Untuk kode yang mengubah visual, requestAnimationFrame dijalankan tepat sebelum pengecatan berikutnya, yang menjadikannya alat yang tepat untuk animasi.

Perbedaan Node.js

Node.js memiliki loop peristiwanya sendiri dengan beberapa fase, termasuk pengatur waktu, polling I/O, dan setImmediate. Ia juga memiliki process.nextTick, yang berjalan dalam antriannya sendiri. Inilah yang kami lihat saat menjalankannya dari dalam fungsi async:

setTimeout(() => console.log("timeout"), 0);
setImmediate(() => console.log("immediate"));
process.nextTick(() => console.log("nextTick"));
Promise.resolve().then(() => console.log("promise"));

// promise
// nextTick
// immediate
// timeout

Banyak artikel menyatakan bahwa nextTick selalu mengalahkan janji, dan pengatur waktu mengalahkan setImmediate. Hasil kami menunjukkan bahwa ini tidak sesederhana itu. Kode kami sudah berjalan dalam tugas mikro, jadi antrean janji dijalankan terlebih dahulu. Dan urutan setTimeout dan setImmediate diketahui bervariasi tergantung dari mana mereka dipanggil. Jadi jangan menulis kode yang bergantung pada urutan pastinya. Jika satu hal harus terjadi setelah hal lain, rangkai secara eksplisit.

Kuis wawancara

Cobalah untuk menyusun urutannya sebelum Anda membaca jawabannya:

console.log("a");
setTimeout(() => console.log("b"), 0);
Promise.resolve().then(() => {
  console.log("c");
  setTimeout(() => console.log("d"), 0);
  Promise.resolve().then(() => console.log("e"));
});
console.log("f");

Proses kami mencetak a, f, c, e, b, d. Inilah alasannya:

1. a dan f sinkron, sehingga dijalankan terlebih dahulu.
2. Tumpukannya kosong, jadi tugas mikro dijalankan: c, lalu tugas mikro baru e, di babak yang sama.
3. Sekarang satu tugas: pengatur waktu b, yang diantrekan terlebih dahulu.
4. Kemudian tugas berikutnya: pengatur waktu d, yang diantrekan selama tugas mikro.

Kesalahan umum

• Berpikir setTimeout adalah tepat. Penundaannya hanya minimum.
• Berpikir async berarti thread lain. Kode asinkron masih berjalan di thread utama di antara menunggu.
• Menggunakan mode tidur untuk memperbaiki pengurutan. Menunggu kondisi sebenarnya jauh lebih dapat diandalkan, yang juga berlaku untuk pengujian tidak stabil.
• Menggunakan forEach dengan await. Tidak menunggu antar item. Lihat Metode array JavaScript.
• Melakukan pekerjaan sinkron berat di pengendali server. Satu permintaan dapat menunda setiap permintaan lainnya.

Penutup

Ingat aturan intinya: jalankan tumpukan hingga kosong, jalankan semua tugas mikro, lalu jalankan satu tugas, dan ulangi. Segala sesuatu yang lain mengikuti darinya. Untuk membuatnya melekat, tulis kuis versi Anda sendiri di atas, prediksi hasilnya di atas kertas, lalu jalankan. Melakukan kesalahan dan memahami alasannya akan mengajari Anda lebih dari sekadar diagram apa pun.

Pertanyaan yang sering diajukan

Teruslah belajar