Soalan Temuduga Teknikal - Part Event Loop

pengenalan

Helo, semua!

Hari ini, seperti yang dikatakan tajuk ?, saya akan bercakap tentang gelung acara.

Ini bukan topik yang sering ditanya oleh penemuduga secara langsung (saya hanya ingat dua kali apabila mereka meminta saya menerangkan gelung acara). TETAPI, dalam kebanyakan temu bual, mereka bertanya soalan yang berkaitan dengannya. Contohnya:

• "Jika saya melakukan ini... apakah kelakuan yang sepatutnya?"
• "Jika kod saya kelihatan seperti ini, apakah yang akan menjadi output?"
• "Mengapa kod ini menghasilkan output ini?"

Semua soalan itu lebih mudah untuk dijawab jika anda memahami cara gelung acara berfungsi.

Sejujurnya: topik ini bukan kegemaran saya. Saya lebih suka soalan tentang kelakuan kod daripada menerangkan cara gelung acara berfungsi selama 10 minit terus.?

Jom selami! ?

## Soalan
1. Apakah gelung acara?
2. Contoh

---

Apakah gelung acara?

Jawapan Ringkas:

Gelung acara bertanggungjawab untuk mengendalikan tugas tak segerak dalam masa jalan JavaScript.

Sejujurnya, saya rasa jawapan ini tidak cukup untuk memuaskan rasa ingin tahu seorang penemuduga bertanya tentang gelung acara. Jadi, dalam siaran ini, saya ingin menyelami topik ini dengan lebih mendalam.

Lebih daripada sekadar mengetahui konsep, adalah penting untuk memahami cara ia berfungsi. Itulah sebabnya saya telah menambahkan beberapa contoh pada penghujungnya.

Teori

Apakah Gelung Acara?

JavaScript mempunyai masa jalan berdasarkan gelung acara, yang bertanggungjawab untuk mengendalikan tugas. Setiap bahasa mempunyai masa jalan yang unik dan perkara penting yang perlu diberi perhatian ialah JavaScript adalah benang tunggal.

Apakah Maksud Benang Tunggal?

Berbenang tunggal bermaksud JavaScript boleh mengendalikan hanya satu tugas pada satu masa. Inilah sebabnya mengapa gelung acara sangat penting dalam JavaScript; ia membantu mengurus tugas dengan cekap walaupun terdapat had satu utas ini.

Komponen Runtime

Untuk memahami gelung acara dengan lebih baik, mari kita lihat komponen utamanya:

Panggilan Stack

tindanan panggilan ialah struktur data yang menjejaki fungsi yang kami panggil. Anda boleh menganggapnya seperti timbunan plat: apabila fungsi dipanggil, ia ditambahkan pada timbunan dan apabila ia selesai, ia dialih keluar daripada timbunan.

Timbunan panggilan beroperasi pada prinsip LIFO (Last-In-First-Out), bermakna JavaScript melaksanakan fungsi mengikut susunan ia disusun—dari item paling atas ke bawah, satu di satu masa (ingat, JavaScript adalah satu benang).

Beratur

Dalam masa jalan JavaScript, kami mempunyai baris gilir, yang menyimpan senarai tugasan untuk diproses. Tugasan dalam baris gilir ini menunggu sehingga timbunan panggilan kosong.

• Baris Gilir Tugas (atau Baris Gilir Balik): Baris gilir ini menyimpan tugas seperti panggilan setTimeout() dan setInterval(). Tugasan di sini diproses selepas timbunan panggilan kosong dan selepas semua tugasan dalam Baris Gilir Microtask telah diproses. Lihat lebih banyak contoh tugasan yang disimpan dalam baris gilir ini di MDN.

• Baris Gilir Tugasan Mikro: Baris gilir ini mempunyai keutamaan berbanding Baris Gilir Tugasan. Ia termasuk tugasan mikro seperti panggilan balik Promise dan fungsi tak segerak seperti process.nextTick() dan fungsi async.

Baris Gilir Tugas berfungsi berdasarkan FIFO (Masuk-Dulu-Keluar), bermakna tugasan diproses mengikut susunan yang ditambahkan, tetapi hanya selepas Microtask Baris gilir kosong.

Gelung Acara

gelung peristiwa ialah mekanisme yang menguruskan pelaksanaan kod tak segerak. Ia memerhati tindanan panggilan dan menyelaras antara tindanan panggilan dan baris gilir (Baris Gilir Tugas dan Gilir Mikrotugas) untuk memastikan kod berjalan lancar.

Bagaimana Ia Berfungsi?

Mari kita lalui proses gelung acara langkah demi langkah. Rujuk imej di bawah untuk gambaran visual.

Dalam contoh ini:

• Timbunan Panggilan mempunyai satu fungsi.
• Microtask Queue mempunyai dua mesej.
• Baris Gilir Tugas mempunyai satu mesej.

Langkah 1: Proseskan Tindanan Panggilan

1. Gelung acara bermula dengan melihat Timbunan Panggilan.
2. Ia mencari fungsi dalam tindanan dan mula melaksanakannya.
3. Setelah fungsi ini selesai, ia dialih keluar daripada Timbunan Panggilan.

Langkah 2: Proseskan Gilir Microtask

1. Selepas Timbunan Panggilan kosong, gelung acara menyemak Baris Gilir Tugasan Mikro.
2. Ia mengambil mesej pertama daripada Baris Gilir Tugasan Mikro dan menolaknya ke Timbunan Panggilan untuk pelaksanaan.

1. Fungsi berjalan dan, setelah selesai, dialih keluar daripada Timbunan Panggilan.
2. Gelung acara kemudian beralih ke mesej seterusnya dalam Baris Gilir Tugas Mikro dan mengulangi proses itu.
3. Ini berterusan sehingga tiada lagi mesej yang tinggal dalam Baris Gilir Tugasan Mikro.

Langkah 3: Proses Barisan Tugasan

1. Setelah kedua-dua Timbunan Panggilan dan Baris Gilir Tugas Mikro kosong, gelung acara bertukar kepada Baris Gilir Tugas.
2. Ia memilih mesej pertama dalam Baris Gilir Tugas dan menambahkannya pada Timbunan Panggilan.
3. Fungsi berjalan, dan apabila ia selesai, ia dialih keluar daripada Timbunan Panggilan.
4. Gelung acara akan meneruskan proses ini dengan setiap tugasan dalam Baris Gilir Tugas, memastikan semua tugasan dikendalikan satu demi satu.

Dengan mengikut tertib ini—Call Stack, kemudian Microtask Queue, dan akhirnya Task Queue—gelung acara membantu JavaScript mengendalikan kod tak segerak dengan cekap, walaupun dalam persekitaran satu benangnya.

---

Contoh

Sekarang kita memahami cara gelung acara berfungsi dan cara tugasan diutamakan, mari lihat beberapa contoh.

Contoh 1

const a = new Promise(function showA(resolve){
  console.log('A');
  resolve('B');
});

setTimeout(function showC() {
  console.log('C');
}, 0);

a.then(function showB(b) {
  console.log(b);
});

const d = function showD() {
  console.log('D');
};

d();

Sebelum meneruskan, cuba fikirkan tentang susunan output.

✨Apakah yang anda jangkakan?✨

Mari kita pecahkan setiap bahagian kod untuk memahami sebab kita mendapat output ini.

1. Mencipta Janji

const a = new Promise(function showA(resolve) {
  console.log('A');
  resolve('B');
});

• Di sini, kami mencipta janji baharu dengan fungsi panggil balik.
• Di dalam fungsi ini, console.log('A') dilaksanakan serta-merta, jadi "A" dicetak ke konsol.
• Selepas mengelog "A", janji itu diselesaikan dengan nilai "B".
• JavaScript mengiktiraf terdapat panggilan balik .kemudian (iaitu, showB) yang sepatutnya dijalankan sebaik susunan panggilan utama jelas, jadi ia menambahkan showB pada Microtask Queue (memandangkan resolusi janji pergi ke sana).

2. setTimeout Call

setTimeout(function showC() {
  console.log('C');
}, 0);

• Jadual fungsi setTimeout menunjukkan C untuk dijalankan selepas 0 milisaat.
• JavaScript meletakkan showC dalam Baris Tugas kerana ia adalah fungsi berasaskan pemasa.

3. a.kemudian Panggil Balik

const a = new Promise(function showA(resolve){
  console.log('A');
  resolve('B');
});

setTimeout(function showC() {
  console.log('C');
}, 0);

a.then(function showB(b) {
  console.log(b);
});

const d = function showD() {
  console.log('D');
};

d();

• Barisan ini mendaftarkan pengendali .then untuk janji yang telah kami selesaikan dalam langkah sebelumnya (resolve('B')).
• Memandangkan janji telah diselesaikan, showB (panggil balik .then) ditambahkan pada Microtask Queue.

4. Mentakrifkan d

const a = new Promise(function showA(resolve) {
  console.log('A');
  resolve('B');
});

• Baris ini hanya mentakrifkan fungsi showD tetapi belum melaksanakannya lagi, jadi tiada apa yang berlaku di sini.

5. Memanggil d()

setTimeout(function showC() {
  console.log('C');
}, 0);

• Sekarang, kami memanggil d(), yang ditambahkan pada Timbunan Panggilan dan dilaksanakan. Ini menghasilkan console.log('D'), jadi "D" dicetak ke konsol.

Pesanan Output Akhir:

a.then(function showB(b) {
  console.log(b);
});

GIF untuk rujukan

Contoh Interaktif

Contoh 2

const d = function showD() {
  console.log('D');
};

Sekali lagi, luangkan masa untuk berfikir tentang susunan output.

✨Apakah yang anda jangkakan?✨

Jom ikut penerangan...

1. Log "Mula!"

d();

• Barisan ini ditambahkan pada Timbunan Panggilan dan dilaksanakan serta-merta.
• Akibatnya, "Mula!" dicetak ke konsol.

1. setTimeout Call

A
D
B
C

• Fungsi setTimeout menjadualkan Timeout untuk dijalankan selepas 0 milisaat.
• JavaScript meletakkan showTimeout dalam Task Queue kerana ia adalah fungsi berasaskan pemasa.

3. Azam Janji

console.log("Start!");

setTimeout(function showTimeout() {
  console.log("Timeout!");
}, 0);

Promise.resolve("Promise!")
  .then(function showPromise(res) {
    console.log(res);
  });

console.log("End!");

• Janji diselesaikan segera dengan nilai "Janji!".
• Tempat JavaScript menunjukkanPromise (panggil balik .then) dalam Microtask Queue kerana promise masuk ke dalam microtask queue selepas diselesaikan.

4. Log "Tamat!"

console.log("Start!");

• Barisan ini ditambahkan pada Timbunan Panggilan dan dilaksanakan serta-merta.
• Akibatnya, "Tamat!" dicetak pada konsol.

Pesanan Output Akhir:

setTimeout(function showTimeout() {
  console.log("Timeout!");
}, 0);

GIF untuk rujukan

Contoh Interaktif

tamat

Bab ini tidak terlalu panjang, tetapi saya harap contoh ini membantu anda memahami cara gelung acara berfungsi.

Saya amat mengesyorkan anda mencuba halaman interaktif untuk menganalisis contoh lain. Bermain-main di halaman itu boleh memudahkan anda memahami gelung acara dalam tindakan.

Terima kasih banyak untuk semua cinta pada catatan saya sebelum ini!

Jumpa anda minggu hadapan! ?

Selamat tinggal

Atas ialah kandungan terperinci Soalan Temuduga Teknikal - Part Event Loop. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!