JavaScript Lanjutan: Meneroka Gelung Acara

pengenalan

JavaScript ialah bahasa pengaturcaraan yang berkuasa dan digunakan secara meluas dalam pembangunan web. Salah satu aspek yang paling menarik ialah model konkurensinya, yang membolehkannya mengendalikan pelbagai tugas dengan cekap walaupun berbenang tunggal. Memahami gelung acara adalah penting untuk menulis kod JavaScript yang berprestasi dan bebas pepijat, terutamanya dalam aplikasi yang kompleks.

Memahami Model Concurrency JavaScript

Sifat Berbenang Tunggal

JavaScript adalah satu-benang, bermakna ia melaksanakan kod secara berurutan, satu operasi pada satu masa. Ini berbeza dengan bahasa yang berbilang benang, yang berbilang benang boleh dijalankan serentak. Walau bagaimanapun, JavaScript menggunakan seni bina yang didorong oleh peristiwa dan tidak menyekat untuk mengurus konkurensi dan mengendalikan tugas tak segerak dengan cekap.

Model Concurrency

JavaScript menggunakan model konkurensi berdasarkan gelung peristiwa, yang membolehkannya melakukan operasi tanpa sekatan. Model ini penting untuk mengendalikan tugas seperti operasi I/O, permintaan rangkaian dan interaksi pengguna tanpa membekukan antara muka pengguna.

Gelung Acara Diterangkan

Apakah Gelung Acara?

Gelung peristiwa ialah mekanisme yang digunakan JavaScript untuk menyelaraskan pelaksanaan kod, mengendalikan acara dan mengurus tugas tak segerak. Ia sentiasa menyemak tindanan panggilan untuk melihat sama ada terdapat sebarang fungsi yang perlu dijalankan dan memproses tugasan dalam baris gilir panggilan balik apabila tindanan kosong.

Komponen Gelung Acara

1. Timbunan Panggilan

Timbunan panggilan menjejaki panggilan fungsi. Apabila fungsi dipanggil, ia ditambahkan pada tindanan dan apabila ia selesai, ia dialih keluar.

Contoh:

function greet() {
  console.log('Hello');
}

function sayGoodbye() {
  console.log('Goodbye');
}

greet();
sayGoodbye();

• greet() dipanggil dan ditambah pada tindanan.
• console.log("Hello") dilaksanakan.
• greet() dialih keluar daripada timbunan.
• sayGoodbye() dipanggil dan ditambah pada tindanan.
• console.log("Selamat tinggal") dilaksanakan.
• sayGoodbye() dialih keluar daripada tindanan.

2. API Web

API Web disediakan oleh penyemak imbas (atau Node.js) dan termasuk ciri seperti setTimeout, acara DOM, ambil, dll. Ia digunakan untuk melaksanakan tugas yang berada di luar urutan pelaksanaan utama.

Contoh:

console.log('Start');

setTimeout(() => {
  console.log('Timeout');
}, 1000);

console.log('End');

• console.log("Mula") dilaksanakan dan dilog serta-merta.
• setTimeout dipanggil dan panggilan baliknya dihantar ke persekitaran API web.
• console.log("End") dilaksanakan dan dilog serta-merta.
• Selepas 1 saat, panggilan balik daripada setTimeout ditolak ke baris gilir panggil balik.
• Setelah tindanan panggilan kosong, gelung peristiwa menolak panggilan balik ke tindanan dan console.log("Tamat masa") dilaksanakan.

3. Barisan Panggilan Balik (Barisan Tugas)

Baris gilir panggil balik menyimpan mesej dengan panggilan balik untuk diproses. Gelung acara mengambil tugas daripada baris gilir dan menambahkannya pada tindanan panggilan untuk dilaksanakan apabila tindanan kosong.

4. Barisan Microtask

Baris gilir microtask digunakan untuk tugasan yang perlu dijalankan serta-merta selepas operasi semasa selesai. Janji dan pemerhati mutasi dikendalikan di sini.

console.log('Start');

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

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

console.log('End');

• console.log("Mula") dilaksanakan dan dilog.
• setTimeout panggil balik dihantar ke baris gilir panggil balik dengan sifar kelewatan.
• Janji telah diselesaikan dan panggilan baliknya ditambahkan pada baris gilir microtask.
• console.log("End") dilaksanakan dan dilog.
• Gelung acara memproses baris gilir microtask dan log console.log("Janji").
• Baris gilir panggil balik diproses, log console.log("Timeout").

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