JavaScript Academy · Pelajaran

Makrotugas dan Antrean Tugas

Pahami cara penjadwalan pengatur waktu dan I/O.

Makrotugas dan Antrean Tugas adalah pelajaran JavaScript Academy gratis di CoddyKit. Ini adalah pelajaran 2 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.

Apa Itu Tugas Makro

Tugas makro (juga disebut tugas) adalah unit pekerjaan yang dijadwalkan untuk berjalan nanti, setelah kode sinkron saat ini selesai. Panggilan balik setTimeout adalah contoh klasik.

Tugas makro menunggu dalam antrean tugas sampai tumpukan pemanggilan kosong.

setTimeout Menunda Pekerjaan

setTimeout mendaftarkan panggilan balik untuk dijalankan nanti. Bahkan dengan jeda 0, panggilan tersebut berjalan setelah semua kode sinkron saat ini.

console.log('first');
setTimeout(() => console.log('third (timeout)'), 0);
console.log('second');

Antrean Tugas

Saat pengatur waktu aktif, panggilan baliknya ditempatkan dalam antrean tugas. Perulangan peristiwa mengambil satu tugas dari antrean ini hanya ketika tumpukan pemanggilan kosong, menjalankannya sampai selesai, lalu memeriksa kembali.

console.log('sync start');
setTimeout(() => console.log('task 1'), 0);
setTimeout(() => console.log('task 2'), 0);
console.log('sync end');

Tugas Berjalan Sesuai Urutan Antrean

Tugas dengan jeda yang sama berjalan sesuai urutan penjadwalannya. Antrean tugas mengikuti FIFO: Masuk Pertama, Keluar Pertama.

setTimeout(() => console.log('A'), 0);
setTimeout(() => console.log('B'), 0);
setTimeout(() => console.log('C'), 0);
console.log('sync');

Jeda Adalah Minimum, Bukan Waktu yang Tepat

Jeda yang Anda berikan adalah waktu minimum sebelum panggilan balik memenuhi syarat untuk berjalan. Eksekusi sebenarnya baru terjadi setelah tumpukan kosong dan tugas-tugas sebelumnya selesai, sehingga waktunya dapat lebih lambat.

setTimeout(() => console.log('100ms'), 100);
setTimeout(() => console.log('0ms'), 0);
console.log('synchronous runs first');

Mengurutkan Berdasarkan Jeda

Jeda yang berbeda mengubah urutan: jeda yang lebih singkat menjadi siap lebih cepat, sehingga biasanya berjalan sebelum jeda yang lebih panjang, terlepas dari urutan penjadwalannya.

setTimeout(() => console.log('50'), 50);
setTimeout(() => console.log('10'), 10);
setTimeout(() => console.log('30'), 30);
console.log('start');

Satu Tugas Makro per Putaran

Perulangan peristiwa menjalankan tepat satu tugas makro pada setiap putaran, lalu melakukan pekerjaan lain sebelum putaran berikutnya. Hal ini menjaga sistem tetap responsif di antara tugas-tugas.

console.log('1');
setTimeout(() => {
  console.log('2');
  setTimeout(() => console.log('4'), 0);
}, 0);
setTimeout(() => console.log('3'), 0);

Pengatur Waktu Bersarang Masuk Antrean Belakangan

Pengatur waktu yang dijadwalkan di dalam sebuah tugas bergabung ke antrean di belakang tugas-tugas yang sudah menunggu, sehingga berjalan pada putaran perulangan berikutnya.

setTimeout(() => {
  console.log('outer');
  setTimeout(() => console.log('inner nested'), 0);
}, 0);
setTimeout(() => console.log('sibling'), 0);

setInterval Juga Merupakan Tugas Makro

setInterval menjadwalkan tugas makro yang berulang. Di sini kita menjalankan beberapa iterasi dan menghentikannya dengan clearInterval agar keluaran tetap terbatas.

let count = 0;
const id = setInterval(() => {
  count++;
  console.log('tick ' + count);
  if (count === 3) clearInterval(id);
}, 10);
console.log('interval scheduled');

Kode Sinkron Selalu Menang

Betapapun kecil jedanya, setiap tugas makro menunggu di belakang semua kode sinkron dalam eksekusi saat ini. Tumpukan harus dikosongkan terlebih dahulu.

setTimeout(() => console.log('macrotask'), 0);
for (let i = 1; i <= 3; i++) console.log('sync ' + i);
console.log('done sync');

Mengapa Tugas Makro Penting

Tugas makro memungkinkan Anda menunda pekerjaan tanpa memblokir. Memecah pekerjaan berat menjadi bagian-bagian yang diberi jeda membuat aplikasi tetap responsif. Namun, tugas makro bukanlah yang memiliki prioritas tertinggi: tugas mikro (janji) berjalan sebelum tugas makro berikutnya, seperti yang akan Anda lihat selanjutnya.

console.log('schedule');
setTimeout(() => console.log('runs after sync'), 0);
console.log('still sync');

Pemeriksaan Singkat

Kapan panggilan balik setTimeout(cb, 0) berjalan?

Ringkasan: Tugas Makro

Anda telah mempelajari cara menjadwalkan pekerjaan yang ditunda:

Tugas makro (setTimeout, setInterval) menunggu dalam antrean tugas.
Antrean tersebut mengikuti FIFO; perulangan peristiwa menjalankan satu tugas pada setiap putaran.
Jeda adalah nilai minimum, dan kode sinkron selalu berjalan terlebih dahulu.
Tugas mikro memiliki prioritas lebih tinggi, yang akan Anda pelajari berikutnya.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Makrotugas dan Antrean Tugas” gratis?

Ya — teks lengkap “Makrotugas dan Antrean Tugas” 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 “Makrotugas dan Antrean Tugas”?

Pahami cara penjadwalan pengatur waktu dan I/O. 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 2 dari 4.

Berapa lama pelajaran “Makrotugas dan Antrean Tugas” 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