0Pricing
Frontend Academy · Pelajaran

Event Loop: Call Stack, Queue, Microtask

Visualisasikan cara JavaScript dieksekusi: call stack, antrean tugas, microtask dari Promise, serta alasan antarmuka pengguna tidak pernah terblokir selama operasi asinkron.

Event Loop: Call Stack, Queue, Microtask adalah pelajaran Frontend Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Frontend Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Frontend Academy mencakup 4 pelajaran total.

JavaScript Hanya Memiliki Satu Utas

JavaScript berjalan pada satu utas — JavaScript hanya dapat menjalankan satu bagian kode pada satu waktu. Namun, JavaScript dapat menangani ribuan operasi asinkron (permintaan jaringan, pewaktu, peristiwa UI) tanpa memblokir. Bagaimana caranya? Loop peristiwa.

Tumpukan Pemanggilan

Tumpukan pemanggilan digunakan JavaScript untuk melacak fungsi yang sedang berjalan. Saat suatu fungsi dipanggil, sebuah bingkai dimasukkan ke tumpukan. Saat fungsi tersebut selesai, bingkai dikeluarkan. Jika tumpukan penuh (rekursi tak terbatas), Anda akan mendapatkan luapan tumpukan.

function c() { /* does something */ }
function b() { c(); }
function a() { b(); }
a();

// Call stack during c():
// c    ← top
// b
// a
// (anonymous)

API Web — Mengalihkan Pekerjaan

Saat JavaScript memanggil fungsi asinkron (setTimeout, fetch, addEventListener), pekerjaan tersebut dialihkan ke API Web di peramban. Mesin JS melanjutkan ke baris berikutnya — mesin tidak menunggu.

console.log('1');
setTimeout(() => console.log('2'), 0); // handed to Web API
console.log('3');
// Output: 1, 3, 2

Antrean Tugas (Antrean Makrotugas)

Ketika operasi API web selesai (pengatur waktu berbunyi, permintaan selesai), fungsi panggilan balik ditempatkan di antrean tugas (antrean makrotugas). Perulangan peristiwa memindahkan fungsi panggilan balik ke tumpukan pemanggilan hanya ketika tumpukan tersebut kosong.

Antrean Mikrotugas

Promise menggunakan antrean mikrotugas — antrean berprioritas tinggi. Setelah setiap tugas selesai dan sebelum tugas berikutnya diambil, semua mikrotugas yang tertunda diproses hingga habis. Mikrotugas selalu berjalan sebelum makrotugas berikutnya.

console.log('1');
setTimeout(() => console.log('timeout'), 0);  // macrotask
Promise.resolve().then(() => console.log('promise')); // microtask
console.log('2');
// Output: 1, 2, promise, timeout

Perulangan Peristiwa Beraksi

Algoritme perulangan peristiwa: 1) Jalankan tugas saat ini dari tumpukan pemanggilan hingga kosong. 2) Proses seluruh antrean mikrotugas hingga habis. 3) Tampilkan ulang jika diperlukan. 4) Ambil makrotugas berikutnya dan ulangi.

queueMicrotask()

queueMicrotask(fn) menjadwalkan fungsi panggilan balik di antrean mikrotugas tanpa membuat Promise. Biasanya tidak diperlukan secara langsung, tetapi berguna untuk memahami cara pustaka menerapkan penjadwalan.

queueMicrotask(() => console.log('microtask'));
console.log('sync');
// Output: sync, microtask

Mengapa Tugas Panjang Membekukan Antarmuka

Jika tugas sinkron berjalan terlalu lama (perulangan ketat yang memproses data dalam jumlah besar), perulangan peristiwa tidak dapat memproses peristiwa antarmuka atau menampilkan ulang halaman. Hal ini membekukan halaman. Pecah pekerjaan panjang menjadi beberapa bagian dengan setTimeout agar kendali dapat kembali ke perulangan peristiwa.

// Bad — blocks the UI for seconds:
for (let i = 0; i < 10_000_000; i++) { /* heavy work */ }

// Better — yield periodically:
async function processInChunks(items) {
  for (let i = 0; i < items.length; i++) {
    process(items[i]);
    if (i % 100 === 0) await new Promise(r => setTimeout(r, 0)); // yield
  }
}

Pekerja Web — Paralelisme Sejati

Untuk pekerjaan yang intensif CPU, gunakan Pekerja Web — utas terpisah dengan perulangan peristiwanya sendiri. Pekerja berkomunikasi dengan utas utama melalui postMessage. Tidak ada memori bersama dan tidak ada kondisi balapan.

requestAnimationFrame

requestAnimationFrame(callback) menjadwalkan fungsi panggilan balik sebelum perenderan ulang peramban berikutnya. Gunakan ini untuk animasi yang digerakkan JavaScript — mekanisme ini menyelaraskan animasi dengan laju penyegaran tampilan, biasanya 60 bingkai per detik.

function animate(timestamp) {
  // update positions based on timestamp
  element.style.transform = `translateX(${timestamp * 0.1 % 400}px)`;
  requestAnimationFrame(animate);
}
requestAnimationFrame(animate);

Memvisualisasikan Perulangan Peristiwa

Demo interaktif di latentflip.com/loupe memungkinkan Anda menempelkan kode dan mengamati tumpukan pemanggilan, API Web, antrean tugas, dan perulangan peristiwa dalam gerakan lambat. Demo ini sangat penting untuk membangun pemahaman intuitif.

Pemeriksaan Singkat

Setelah Promise diselesaikan, fungsi panggilan balik .then()-nya berjalan di antrean mana?

Ringkasan: Perulangan Peristiwa

JavaScript berjalan dalam satu utas. Pekerjaan asinkron ditangani oleh API Web. Fungsi panggilan balik kembali melalui antrean tugas (setTimeout dan fungsi panggilan balik permintaan) atau antrean mikrotugas (Promise). Perulangan peristiwa memproses mikrotugas hingga habis setelah setiap tugas, sebelum perenderan atau makrotugas berikutnya. Kode sinkron yang panjang memblokir semuanya.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Event Loop: Call Stack, Queue, Microtask” gratis?

Ya — teks lengkap “Event Loop: Call Stack, Queue, Microtask” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Frontend Academy, upgrade ke CoddyKit PRO. Kursus Frontend Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Event Loop: Call Stack, Queue, Microtask”?

Visualisasikan cara JavaScript dieksekusi: call stack, antrean tugas, microtask dari Promise, serta alasan antarmuka pengguna tidak pernah terblokir selama operasi asinkron. Kamu berlatih Frontend Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Frontend Academy?

Tidak diperlukan pengalaman sebelumnya. Frontend Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Event Loop: Call Stack, Queue, Microtask” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Frontend Academy ini?

Ya. Setiap pelajaran Frontend Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Event Loop: Call Stack, Queue, Microtask
  2. Callback dan Callback Hell
  3. Promise: then, catch, finally, Promise.all
  4. async/await dan Penanganan Error
← Kembali ke Frontend Academy