Cara bermain Event Loop Warung
- Baca kode di panel kanan (di ponsel, di atas). Kode ini tidak dijalankan, kamu yang menebak hasilnya.
- Susun teks output di panel kiri dengan tombol naik dan turun, atau seret dengan mouse.
- Tekan Cek jawaban atau Ctrl + Enter. Kalau salah, pesannya menyebut baris pertama yang belum pas.
- Setelah benar, tekan Maju dan Mundur untuk melihat kasir dan antrean bergerak langkah demi langkah.
- Kalau buntu, buka Petunjuk. Level yang sudah selesai tetap tercentang di browser yang sama.
Yang kamu pelajari
- Level 1
Call stack
Kasir warung. Kode biasa dikerjakan di sini satu per satu sampai habis.
- Level 2
setTimeout
Menitipkan callback ke antrean nanti (macrotask queue). Jeda 0 ms tetap menunggu kasir kosong.
- Level 4
Promise.then
Callback-nya masuk antrean cepat (microtask queue) setelah Promise selesai.
- Level 5
Microtask sebelum macrotask
Begitu kasir kosong, antrean cepat dihabiskan dulu, baru satu pesanan dari antrean nanti diambil.
- Level 6
queueMicrotask
Menaruh callback langsung di antrean cepat.
- Level 8
async dan await
Isi async function jalan langsung sampai
await. Sisanya dilanjutkan dari antrean cepat.
Jeda 0 ms tetap menunggu giliran
setTimeout(cb, 0) tidak menjalankan cb saat itu juga. Callback dititipkan ke antrean nanti dan baru diambil setelah kasir kosong dan antrean cepat habis.
Karena itu Promise.resolve().then(cb) selalu keluar lebih dulu daripada setTimeout(cb, 0), walaupun setTimeout ditulis di baris yang lebih atas.
Tanya jawab
Apakah harus daftar akun untuk bermain?
Tidak. Semua level bisa dimainkan tanpa akun. Kemajuanmu disimpan di browser yang kamu pakai, jadi akan hilang kalau data browser dihapus.
Apakah kode di setiap level benar-benar dijalankan?
Tidak di browser. Jawaban tiap level dicocokkan dengan output Node.js lewat test otomatis. Animasinya memakai simulasi yang mengikuti aturan event loop yang sama.
Apa beda microtask dan macrotask?
Microtask (antrean cepat) berisi callback then, queueMicrotask, dan lanjutan setelah await. Macrotask (antrean nanti) berisi callback setTimeout. Setelah setiap macrotask, semua microtask dihabiskan dulu.
Kenapa baris setelah await jalan belakangan?
await mengembalikan kendali ke pemanggil. Sisa fungsi baru dilanjutkan dari antrean cepat setelah kode di kasir selesai.
Apakah urutan ini sama di browser dan Node.js?
Untuk kode di game ini, ya. Browser dan Node.js sama-sama menghabiskan microtask sebelum mengambil callback setTimeout berikutnya. Jawabannya diuji dengan Node.js.