0Pricing
JavaScript Academy · Pelajaran

Dasar Event Loop serta Task vs Microtask

Lihat cara event loop menjalankan kode sinkron terlebih dahulu, lalu microtask, kemudian task. Berlatih dengan setTimeout, Promise.then, dan queueMicrotask

Dasar Event Loop serta Task vs Microtask adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 3. 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 3 pelajaran total.

Pengantar perulangan peristiwa

Tujuan: Pelajari urutan dasar: kode sinkron → tugas mikro (Promise/queueMicrotask) → tugas (setTimeout).

  • Sinkron terlebih dahulu
  • Tugas mikro berikutnya
  • Tugas terakhir
Dasar Event Loop serta Task vs Microtask — ilustrasi 1

Sinkron terlebih dahulu

Pernyataan sinkron dijalankan dari atas ke bawah sebelum fungsi panggil balik apa pun yang berada dalam antrean.

// Sync code runs immediately
console.log("A: sync start");

console.log("B: sync middle");

console.log("C: sync end");
Dasar Event Loop serta Task vs Microtask — ilustrasi 2

Dasar-dasar antrean tugas

setTimeout menempatkan sebuah tugas ke dalam antrean. Tugas itu berjalan setelah putaran saat ini selesai.

// Tasks (macrotasks) via setTimeout
console.log("1: start");

setTimeout(function () {
  console.log("3: timeout task");
}, 0);

console.log("2: after scheduling");
Dasar Event Loop serta Task vs Microtask — ilustrasi 3

Dasar-dasar tugas mikro

Promise.then menambahkan sebuah tugas mikro. Tugas mikro berjalan tepat setelah kode sinkron dan sebelum tugas.

// Microtasks via Promise.then
console.log("X: sync");

Promise.resolve().then(function () {
  console.log("Y: microtask");
});

console.log("Z: after scheduling microtask");
Dasar Event Loop serta Task vs Microtask — ilustrasi 4

Demo urutan

Urutan yang diharapkan: Mulai → Selesai → Tugas mikro → Tugas.

// Order demo: microtask runs before task
console.log("Start");

setTimeout(function () {
  console.log("Task: timeout");
}, 0);

Promise.resolve().then(function () {
  console.log("Microtask: promise");
});

console.log("End");
Dasar Event Loop serta Task vs Microtask — ilustrasi 5

Demo queueMicrotask

queueMicrotask juga menjadwalkan tugas mikro. Buat fungsi panggil balik tetap kecil agar aplikasi berjalan lancar.

// queueMicrotask is another way to schedule a microtask
console.log("S");

queueMicrotask(function () {
  console.log("M: microtask");
});

console.log("E");

// Tip: do not overuse microtasks; keep callbacks tiny
Dasar Event Loop serta Task vs Microtask — ilustrasi 6

Kuis tugas mikro vs tugas

Pemeriksaan cepat: Aturan pengurutan.

Dasar Event Loop serta Task vs Microtask — ilustrasi 7

Ringkasan

Ringkasan: Perulangan menjalankan kode sinkron terlebih dahulu, lalu mengosongkan antrean tugas mikro, kemudian menjalankan tugas. Gunakan setTimeout untuk tugas dan Promise.then/queueMicrotask untuk tugas mikro.

Dasar Event Loop serta Task vs Microtask — ilustrasi 8

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Dasar Event Loop serta Task vs Microtask” gratis?

Ya — teks lengkap “Dasar Event Loop serta Task vs Microtask” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus JavaScript Academy, upgrade ke CoddyKit PRO. Kursus JavaScript Academy mencakup 3 pelajaran total.

Apa yang akan aku pelajari di “Dasar Event Loop serta Task vs Microtask”?

Lihat cara event loop menjalankan kode sinkron terlebih dahulu, lalu microtask, kemudian task. Berlatih dengan setTimeout, Promise.then, dan queueMicrotask Kamu berlatih JavaScript 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 JavaScript Academy?

Tidak diperlukan pengalaman sebelumnya. JavaScript 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 3.

Berapa lama pelajaran “Dasar Event Loop serta Task vs 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 JavaScript Academy ini?

Ya. Setiap pelajaran JavaScript 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. Dasar Event Loop serta Task vs Microtask
  2. Promise — Status, Perantaian, Penanganan Galat
  3. Promise.all / any / race / allSettled — pilih alat yang tepat
← Kembali ke JavaScript Academy