Memahami Gelung Peristiwa dalam JavaScript — Dipermudahkan!

JavaScript ialah salah satu bahasa pengaturcaraan yang paling popular, menguasai 90% tapak web di web! Tetapi, salah satu konsep yang paling rumit dan paling salah faham ialah cara gelung peristiwa berfungsi. Berikut ialah penjelasan mudah untuk gelung acara, baris gilir tugas, tindanan panggilan, baris gilir microtask dan API web.

Apa yang Membuatkan JavaScript Istimewa?

JavaScript ialah bahasa satu utas. Ini bermakna ia memproses satu perkara pada satu masa, tidak seperti bahasa seperti C atau Go, yang boleh mengendalikan berbilang perkara secara serentak. Untuk menjadikan tugas tak segerak seperti mengambil data atau menjalankan pemasa berfungsi dengan lancar, JavaScript menggunakan sesuatu yang dipanggil gelung peristiwa!

1. Apakah API Web?

API Web ialah alat tambahan yang disediakan oleh penyemak imbas atau Node.js untuk mengendalikan tugas seperti membuat permintaan rangkaian (menggunakan pengambilan), menetapkan pemasa (setTimeout) atau mengakses lokasi pengguna (menggunakan API Geolokasi). Tugasan ini dijalankan di luar urutan JavaScript utama.

Contoh:

setTimeout(() => {
  console.log("Timer done!");
}, 2000);

Di sini, penyemak imbas mengendalikan pemasa sementara JavaScript utama terus menjalankan kod lain.

2. Apakah Barisan Tugasan?

Baris Gilir Tugas ialah tempat fungsi panggil balik daripada API Web, pendengar acara dan tindakan tertunda lain menunggu sehingga JavaScript bersedia untuk menjalankannya. Tugasan ini menunggu giliran.

Anggaplah ia seperti barisan menunggu di kedai, setiap tugasan akan diproses oleh gelung acara apabila JavaScript selesai dengan tugasan semasa.

3. Apakah Tindanan Panggilan?

Timbunan Panggilan ialah tempat JavaScript menjejaki panggilan fungsi. Apabila anda memanggil fungsi, ia akan ditolak ke tindanan. Apabila ia selesai, ia muncul. JavaScript memproses tugasan mengikut susunan tugasan itu muncul dalam timbunan, ia bersifat segerak.

4. Apakah Gelung Acara?

Gelung Acara adalah seperti pegawai trafik yang memastikan segala-galanya bergerak. Ia sentiasa menyemak sama ada tindanan panggilan kosong, dan jika kosong, ia mengalihkan tugasan daripada gilir tugas atau gilir tugasan mikro ke tindanan untuk dilaksanakan. Inilah yang membolehkan JavaScript mengendalikan kod tak segerak tanpa menyekat urutan utama.

Contoh Gelung Peristiwa dalam Tindakan

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

setTimeout(() => {
  console.log("100ms");
}, 100);

console.log("End");

Apa yang berlaku di sini?

Mari pecahkan:

1. "Tamat" dilog serta-merta kerana ia segerak dan berjalan dalam timbunan panggilan.
2. SetTimeout dengan 100ms dikendalikan oleh API Web. Selepas 100ms, panggilan baliknya beralih ke baris gilir tugas.
3. SetTimeout dengan 2000ms melakukan perkara yang sama, tetapi panggilan baliknya beralih ke baris gilir tugas selepas 2000ms.
4. gelung peristiwa mengalihkan panggil balik 100ms ke tindanan panggilan dahulu, kemudian panggil balik 2000ms.

5. Apakah itu Microtask Queue?

Microtask Queue ialah baris gilir khas untuk tugasan yang diproses sebelum baris gilir tugas. Tugasan mikro datang daripada perkara seperti Janji atau pemerhati mutasi. Gelung acara sentiasa menyemak baris gilir tugas mikro sebelum baris gilir tugas.

Contoh Microtask dengan Promise

console.log("Start");

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

Promise.resolve().then(() => {
  console.log("Promise");
});

console.log("End");

Apa yang berlaku di sini?

1. "Mula" dilog serta-merta.
2. Panggil balik setTimeout diletakkan dalam baris gilir tugas.
3. Resolusi Promise diletakkan dalam gilir tugasan mikro.
4. "Tamat" dilog.
5. Gelung acara menyemak baris gilir tugas mikro, melaksanakan panggilan balik Promise.
6. Akhir sekali, baris gilir tugas memproses panggilan balik setTimeout.

Output:

Start
End
Promise
Timeout

Perwakilan Visual

Membungkus Semuanya

Begini cara semuanya sesuai:

1. API Web mengendalikan tugas tak segerak seperti pemasa di luar urutan utama.
2. Gelung Acara mengalihkan tugasan daripada Baris Gilir Tugas atau Baris Gilir Tugas Mikro ke Timbunan Panggilan.
3. Microtasks (seperti janji) dikendalikan terlebih dahulu, sebelum tugasan dalam Task Queue.

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