Memahami Gelung Acara JavaScript (Dibuat Mudah)

Memahami Gelung Acara JavaScript (Dibuat Mudah)

JavaScript gelung peristiwa ialah perkara yang membolehkan pengaturcaraan tak segerak dalam JavaScript. Berikut ialah penjelasan ringkas!

---

? Konsep Utama

1. Berbenang Tunggal

JavaScript hanya boleh melakukan satu perkara pada satu masa kerana ia berbenang tunggal.

console.log("Task 1");
console.log("Task 2");

? Keluaran:

Task 1
Task 2

2. Segerak lwn Tak Segerak

• Tugas segerak: Jalankan mengikut urutan, satu demi satu.
• Tugas tak segerak: Jangan sekat urutan utama; mereka menunggu sehingga mereka bersedia untuk berlari.

console.log("Start");

setTimeout(() => {
  console.log("Async Task");
}, 1000);

console.log("End");

? Keluaran:

Start
End
Async Task

---

? Bagaimana Gelung Acara Berfungsi

1. Timbunan Panggilan

   • Tempat di mana tugas dilaksanakan satu persatu.
   • Apabila fungsi berjalan, ia akan ditambahkan pada timbunan. Apabila ia selesai, ia akan dikeluarkan.

2. API Web

   • Tugas tak segerak (seperti setTimeout) dikendalikan di sini. Mereka menunggu di latar belakang.

3. Barisan Panggilan Balik

   • Setelah tugas tak segerak selesai, panggil baliknya ditambahkan pada baris gilir.

4. Gelung Acara

   • Gelung acara menyemak:
     1. Adakah tindanan panggilan kosong?
     2. Jika YA, ia mengambil tugasan daripada baris gilir panggil balik dan menolaknya ke tindanan.

---

✨ Contoh: Langkah demi Langkah

console.log("Start");

setTimeout(() => {
  console.log("Timeout Task");
}, 2000);

console.log("End");

1️⃣ Timbunan Panggilan

Step	Call Stack	Notes
1	console.log	Logs "Start"
2	setTimeout	Registers timeout task
3	console.log	Logs "End"

2️⃣ API Web

• setTimeout beralih ke API Web dan memulakan pemasa.

3️⃣ Barisan Panggilan Balik

• Selepas 2000ms, panggilan balik (() => console.log("Tugas Tamat Masa")) bergerak ke baris gilir.

4️⃣ Gelung Acara

• Gelung acara menyemak sama ada tindanan panggilan kosong.
• Panggil balik dialihkan ke tindanan dan dilaksanakan.

? Output Akhir:

Start
End
Timeout Task

---

? Memvisualisasikan Gelung Acara

Untuk benar-benar memahami gelung acara, lihat sumber ini:

• Loupe
• MDN: Model Concurrency

Selamat pengekodan! ?

Atas ialah kandungan terperinci Memahami Gelung Acara JavaScript (Dibuat Mudah). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!