Gelung Acara — JavaScript

Gelung peristiwa ialah gelung yang mengekalkan susunan pelaksanaan (mengendalikan operasi tak segerak tanpa menyekat urutan utama) kod JavaScript.

Perkara yang perlu diketahui sebelum terjun ke gelung acara:

1. Call Stack: Di sinilah JavaScript melaksanakan kod kami. Ia mengikut struktur Masuk Terakhir, Keluar Dahulu (LIFO). Apabila fungsi dipanggil, konteks pelaksanaan baharu dicipta dan ia akan ditolak ke tindanan. Apabila fungsi tamat, ia akan dipadamkan.
2. Baris Gilir MicroTasks: Baris gilir khas khusus untuk kaedah gilirMicroTask, pengendali Janji, menunggu panggil balik dan MutationObserver (antara muka menyediakan keupayaan untuk melihat perubahan yang dibuat pada pokok DOM).
3. Baris Gilir MacroTasks: Semua panggilan balik lain daripada API Web (setTimeout, setInterval, API DOM, ambil) memasuki baris gilir macroTasks.

Apakah Gelung Acara?

Ini adalah gelung tanpa henti yang menunggu tugasan dan menolaknya ke dalam timbunan panggilan untuk dilaksanakan. Memandangkan JavaScript adalah satu-benang, ia mengekalkan perintah pelaksanaan untuk mengendalikan kedua-dua operasi tak segerak berdasarkan keutamaan.

1. Kod JS biasa: Kod segerak dijalankan dahulu dan mengisi timbunan panggilan.
2. MicroTasks: Tugasan beratur dalam baris gilir microTasks akan dilaksanakan.
3. MacroTasks: Tugasan beratur dalam baris gilir macroTasks akan dilaksanakan.

// Programmatic way of how the event loop processes tasks
while (true) {
  // Step 1: Execute tasks in the call stack
  while (!callStack.isEmpty()) {
    const currentTask = callStack.pop();
    currentTask(); // Executes the task
  }
  // Step 2: Process all microtasks
  while (!microTasksQueue.isEmpty()) {
    const microTask = microTasksQueue.shift();
    callStack.push(microTask); // Push microtask to call stack for execution
  }
  // Step 3: Process one macrotask if available
  if (!macroTasksQueue.isEmpty()) {
    const macroTask = macroTasksQueue.shift();
    callStack.push(macroTask); // Push macrotask to call stack for execution
  }
  // Break if there's nothing left to process
  if (callStack.isEmpty() && microTasksQueue.isEmpty() && macroTasksQueue.isEmpty()) {
    break;
  }
}

Mari kita lihat contoh untuk memahami aliran kerja dengan lebih baik

1.  setTimeout(() => console.log(1), 2000);
2.  Promise.resolve().then(() => {
3.      console.log(2);
4.      queueMicroTask(() => console.log(3));
5.  });
6.  Promise.resolve().then(() => {
7.      console.log(4);
8.      setTimeout(() => console.log(5));
9.  });
10. setTimeout(() => console.log(6));
11. console.log(7);

// 7 2 4 3 6 5 1

Anggapkan kita mempunyai 2 baris gilir microTasks dan makroTasks. Apabila kod mula dilaksanakan,

1. () => console.log(1) akan ditolak ke dalam baris gilir makroTasks dalam 2000ms.
2. () => { console.log(2); queueMicroTask(() => console.log(3)); }) akan ditolak ke dalam baris gilir microTasks.
3. () => { console.log(4); setTimeout(() => console.log(5)); }) akan ditolak ke dalam baris gilir microTasks.
4. () => console.log(6) akan ditolak ke dalam baris gilir makroTasks dalam 0ms.
5. console.log(7) melaksanakan dan mencetak 7 dalam konsol.
6. Kini gelung acara menyemak baris gilir microTasks untuk tugasan dan mengambil () => { console.log(2); queueMicroTask(() => console.log(3)); }) tugasan dan cetak 2 dalam konsol dan tolak () => console.log(3) ke dalam baris gilir microTasks.
7. Seterusnya, gelung acara menyemak microTasks baris gilir dan mengambil () => { console.log(4); setTimeout(() => console.log(5)); }) tugasan dan cetak 4 dan tolak () => console.log(5) ke dalam baris gilir makroTasks dalam 0ms.
8. Sekali lagi, gelung acara menyemak microTasks baris gilir dan mengambil () => console.log(3)) tugasan dan mencetak 3 dalam konsol.
9. Memandangkan baris gilir microTasks kosong sekarang, gelung acara menyemak macroTaskQueue dan mengambil () => console.log(6) dan mencetak 6 dalam konsol.
10. Gelung acara mengambil tugas seterusnya () => console.log(5) daripada macroTasks selepas memastikan tiada sebarang tugasan dalam microTasks baris gilir dan mencetak 5 dalam konsol .
11. Gelung acara mengambil tugas seterusnya () => console.log(1) daripada makroTasks dan mencetak 1 dalam konsol.

---

Terima kasih kerana membaca! Saya harap anda mendapati blog ini bermaklumat dan menarik. Jika anda mendapati sebarang ketidaktepatan atau mempunyai sebarang maklum balas, sila jangan teragak-agak untuk memberitahu saya.

Atas ialah kandungan terperinci Gelung Acara — JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!