Event Loop

Termasuk bagian Dasar-Dasar Node.js dalam perjalanan Node.js di Coddy. Pelajaran 26 dari 33.

Callback dan promise berjalan belakangan, dan bug tersembunyi saat kamu tidak tahu persis kapan hal itu terjadi.

Node menjalankan semua kode sinkron hingga selesai terlebih dahulu. Setelah itu, Node menjalankan tugas mikro: callback promise dan fungsi yang diteruskan ke queueMicrotask. Barulah setelah itu pengatur waktu berjalan. setTimeout(fn, ms) menjalankan fn satu kali, setelah ms milidetik. Bahkan setTimeout(fn, 0) tetap menunggu hingga semua tugas mikro selesai.

setTimeout(() => console.log('C timer'), 0);
Promise.resolve().then(() => console.log('B promise'));
console.log('A sync');
// A sync, B promise, C timer

Penundaan 0 berarti sesegera mungkin setelah semua tugas mikro selesai, tidak pernah sebelumnya. Pengatur waktu berjalan sesuai urutan penundaannya. Jika penundaannya sama, pengatur waktu yang diatur lebih dulu akan berjalan lebih dulu.

Tantangan

Mudah

Node menjalankan kodemu dalam urutan tetap. Pertama, baris normal, lalu microtask seperti callback promise, kemudian timer. Gunakan urutan itu agar empat baris tercetak sesuai urutan angka tanpa memindahkannya.

order.js mencetak empat barisnya dari 4 hingga 1. Jangan pindahkan atau mengurutkan ulang baris-barisnya. Sebagai gantinya, bungkus tiga baris agar dijalankan belakangan.

Biarkan console.log('1 sync') seperti semula. Kode normal dijalankan lebih dahulu.
Bungkus baris 2 microtask dengan queueMicrotask agar dijalankan tepat setelah kode normal.
Bungkus baris 3 timeout dan baris 4 timeout later, masing-masing dengan setTimeout tersendiri. setTimeout(fn, ms) menjalankan fungsi fn satu kali, setelah ms milidetik. Baris 4 diatur sebelum baris 3, jadi baris 4 memerlukan jeda yang lebih lama.

node order.js kemudian mencetak:

1 sync
2 microtask
3 timeout
4 timeout later

Coba: sebelum menjalankannya, tebak urutannya. Lalu tekan Jalankan, terminal menampilkan $ node order.js. Berikutnya, beri kedua timer jeda 0 lalu jalankan lagi: 4 timeout later sekarang tercetak sebelum 3 timeout, karena jika jedanya sama, timer yang diatur lebih dahulu akan dijalankan lebih dahulu. Kembalikan jeda yang lebih lama pada baris 4 sebelum menekan Periksa.

Coba sendiri

// Buat baris-baris ini mencetak sesuai urutan angka tanpa memindahkannya.
// Sebagai gantinya, bungkus baris-baris itu dengan queueMicrotask dan setTimeout.
console.log('4 timeout later');
console.log('3 timeout');
console.log('2 microtask');
console.log('1 sync');