JavaScript Academy · Pelajaran

queueMicrotask dan Pengurutan

Kendalikan urutan eksekusi secara presisi.

queueMicrotask dan Pengurutan adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 4 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 JavaScript Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus JavaScript Academy mencakup 4 pelajaran total.

Berkenalan dengan queueMicrotask

queueMicrotask adalah cara langsung untuk menjadwalkan tugas mikro tanpa membuat janji. Panggilan baliknya berjalan setelah kode sinkron saat ini selesai, tetapi sebelum tugas makro apa pun.

Ini adalah alat paling bersih untuk menunda pekerjaan ke titik pemeriksaan tugas mikro berikutnya.

Penggunaan Dasar

Berikan sebuah fungsi kepada queueMicrotask. Fungsi tersebut berjalan setelah kode sinkron selesai.

console.log('start');
queueMicrotask(() => console.log('microtask'));
console.log('end');

Prioritas yang Sama dengan Janji

Panggilan balik queueMicrotask dan .then dari janji berbagi antrean tugas mikro. Keduanya berjalan sesuai urutan saat dijadwalkan.

queueMicrotask(() => console.log('qmt 1'));
Promise.resolve().then(() => console.log('promise'));
queueMicrotask(() => console.log('qmt 2'));
console.log('sync');

Mengalahkan setTimeout

Seperti semua tugas mikro, panggilan balik queueMicrotask berjalan sebelum tugas makro setTimeout apa pun, bahkan yang dijadwalkan lebih dahulu.

setTimeout(() => console.log('timeout (macro)'), 0);
queueMicrotask(() => console.log('microtask (micro)'));
console.log('sync');

Pengurutan Saat Pengosongan

Tugas mikro berjalan dalam urutan FIFO. Tugas pertama yang dimasukkan ke antrean berjalan lebih dahulu saat antrean dikosongkan.

queueMicrotask(() => console.log('1'));
queueMicrotask(() => console.log('2'));
queueMicrotask(() => console.log('3'));
console.log('sync done');

Menyusun Tugas Mikro Bertingkat

Sebuah tugas mikro dapat memasukkan tugas mikro lain ke antrean. Tugas baru tersebut berjalan dalam pengosongan yang sama, setelah tugas yang sudah ada di antrean, sebelum tugas makro apa pun.

queueMicrotask(() => {
  console.log('A');
  queueMicrotask(() => console.log('C (nested)'));
});
queueMicrotask(() => console.log('B'));
setTimeout(() => console.log('D (macro)'), 0);
console.log('sync');

Demo Pengurutan Lengkap

Gabungkan kode sinkron, tugas mikro, dan tugas makro. Telusuri aturannya: sinkron terlebih dahulu, lalu tugas mikro sesuai urutan, kemudian pewaktu.

console.log('1 sync');
setTimeout(() => console.log('5 macro'), 0);
queueMicrotask(() => console.log('3 micro'));
Promise.resolve().then(() => console.log('4 micro'));
console.log('2 sync');

Penyisipan Bersama Pola asinkron/menunggu

Kelanjutan await juga merupakan tugas mikro, sehingga penyisipannya dengan queueMicrotask mengikuti urutan penjadwalan.

async function task() {
  console.log('a');
  await null;
  console.log('d (after await)');
}
queueMicrotask(() => console.log('c (queueMicrotask)'));
task();
console.log('b');

Mengapa Menggunakan queueMicrotask

Gunakan ini ketika Anda harus menunda sedikit pekerjaan hingga setelah tumpukan pemanggilan saat ini, tetapi sebelum peramban menampilkan tampilan atau pewaktu apa pun berjalan. Cara ini menghindari beban tambahan dan perilaku penyelesaian dari pembuatan janji sementara.

let ready = false;
queueMicrotask(() => {
  ready = true;
  console.log('ready is now', ready);
});
console.log('ready is', ready);

Hindari Perulangan Tugas Mikro Tanpa Akhir

Karena tugas mikro dikosongkan sepenuhnya sebelum tugas makro, panggilan balik yang selalu memasukkan dirinya sendiri kembali ke antrean akan memblokir pewaktu dan perenderan selamanya. Selalu sediakan kondisi penghentian.

let n = 0;
function step() {
  if (n++ < 3) {
    console.log('step ' + n);
    queueMicrotask(step);
  }
}
setTimeout(() => console.log('macro runs after all micros'), 0);
step();

Model Mental Lengkap

Setiap giliran perulangan peristiwa: jalankan tugas makro (atau skrip awal), lalu kosongkan setiap tugas mikro, kemudian lakukan perenderan, dan ulangi. queueMicrotask memungkinkan Anda mengaitkan pekerjaan secara tepat ke fase pengosongan tersebut.

console.log('script start');
setTimeout(() => console.log('setTimeout'), 0);
queueMicrotask(() => console.log('queueMicrotask'));
Promise.resolve().then(() => console.log('promise then'));
console.log('script end');

Pemeriksaan Singkat

Di mana panggilan balik queueMicrotask berjalan relatif terhadap setTimeout(fn, 0)?

Rangkuman: queueMicrotask dan Pengurutan

Anda telah menguasai penjadwalan terperinci:

queueMicrotask menjadwalkan tugas mikro tanpa janji.
Fungsi ini berbagi antrean tugas mikro dengan panggilan balik janji, dalam urutan FIFO.
Semua tugas mikro dikosongkan sebelum tugas makro apa pun dan sebelum perenderan.
Model perulangannya: tugas makro, kosongkan tugas mikro, lakukan perenderan, ulangi.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “queueMicrotask dan Pengurutan” gratis?

Ya — teks lengkap “queueMicrotask dan Pengurutan” 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 4 pelajaran total.

Apa yang akan aku pelajari di “queueMicrotask dan Pengurutan”?

Kendalikan urutan eksekusi secara presisi. 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 4 dari 4.

Berapa lama pelajaran “queueMicrotask dan Pengurutan” 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

← Kembali ke JavaScript Academy