Apakah Maksud SetTimeout(..., ) Sebenarnya dalam JavaScript? (Gelung Acara Diterangkan!)

Apakah Maksud SetTimeout(..., 0ms) Sebenarnya dalam JavaScript? (Gelung Acara Diterangkan!)

Baiklah, mari pecahkan keseluruhan setTimeout ini dengan 0ms. Pada pandangan pertama, anda akan fikir, "Bro, 0ms bermakna ia akan berjalan serta-merta, bukan?" Tetapi JavaScript mempunyai getaran tersendiri dan 0ms tidak secepat yang anda jangkakan. Mari kita fikirkan perkara ini bersama-sama.

Kod:

Berikut ialah kod yang kami bedah:

const promise = new Promise((resolve, reject) => {
  console.log(1); 
  setTimeout(() => { 
    console.log("timerStart");
    resolve("success"); 
    console.log("timerEnd");
  }, 0); 
  console.log(2); 
});

promise.then((res) => {
  console.log(res); 
})

console.log(4);

Dan outputnya?

1  
2  
4  
timerStart  
success  
timerEnd  

Soalan Besar: Apa yang Berlaku dengan 0ms?

Apabila anda melihat setTimeout(() => { ... }, 0), rasanya kod di dalamnya akan dijalankan sejurus selepas 0ms. Tetapi tidak, JavaScript adalah seperti, "Bro, saya mempunyai sistem saya sendiri, tunggu giliran anda!"

Sistem JavaScript: Gelung Acara

JavaScript bukan sahaja menjalankan kod secara langsung—ia mempunyai sistem hebat yang dipanggil gelung peristiwa untuk mengendalikan tugas. Fikirkan seperti ini:

1. Tugas utama (Segerak):
   
   Perkara seperti console.log() dijalankan dahulu. Ini adalah tugas langsung, di hadapan anda.

2. Microtasks (Janji):
   
   Janji datang seterusnya, walaupun sebelum pemasa. Ia seperti mereka mendapat tiket VIP.

3. Baris gilir tugas (Pemasa seperti setTimeout):
   
   Pemasa pergi ke belakang baris dan hanya berjalan selepas tugasan mikro selesai. Walaupun anda memberinya 0ms, ia menunggu.

Memecahkan Kod

Mari lihat apa yang berlaku langkah demi langkah:

1. Janji Dicipta:

   • console.log(1) berjalan serta-merta.
   • setTimeout(() => { ... }, 0) akan ditambahkan pada baris gilir tugas.
   • console.log(2) berjalan serta-merta.

2. Janji .then():

   • Panggil balik .then() ditambahkan pada gilir tugasan mikro.

3. console.log(4):

   • Dijalankan secara langsung kerana ia merupakan sebahagian daripada skrip utama.

4. Microtask Runs (VIP):

   • Janji diselesaikan, jadi panggilan balik .then() mencatatkan "berjaya".

5. Baris Gilir Tugas Berjalan:

   • Panggil balik setTimeout akhirnya mendapat gilirannya: log "timerStart" dan "timerEnd".

Mengapa 0ms Tidak Bermaksud "Sekarang"?

Walaupun anda mengatakan 0ms, setTimeout adalah sentiasa ditangguhkan. JavaScript menolaknya ke baris gilir tugas, tidak kira apa. Sistem terlebih dahulu mengosongkan semua tugasan segerak dan tugasan mikro (janji) sebelum menyentuh baris gilir tugas.

Jadi, secara ringkasnya:

0ms bukan mengenai masa—ia lebih kurang menunggu giliran anda.

Fikirkan Seperti Ini

Bayangkan anda berada dalam barisan untuk menaiki rollercoaster:

1. Kod segerak: Orang yang membeli tiket laluan pantas—mereka adalah yang pertama, tiada perdebatan.
2. Janji: Orang yang mempunyai pas VIP—mereka berada di barisan seterusnya, walaupun mereka datang lewat.
3. Pemasa (seperti setTimeout): Orang biasa tanpa pas. Walaupun anda memberitahu mereka, "0ms tunggu," mereka masih perlu berdiri dalam baris gilir biasa.

Rekap Output Akhir

Berikut ialah susunan acara dalam kod kami:

1. console.log(1) (Segerak)
2. console.log(2) (Segerak)
3. console.log(4) (Segerak)
4. "kejayaan" daripada .then() (Microtask)
5. console.log("timerStart") (Baris gilir tugas)
6. console.log("timerEnd") (Baris gilir tugas)

Mengapa Ini Penting?

Memahami cara 0ms benar-benar berfungsi membantu anda menulis kod tak segerak yang lebih baik. Ia juga merupakan helah hebat untuk menerangkan kepada rakan anda apabila mereka menyahpepijat kelewatan rawak dalam JavaScript mereka.

Jadi lain kali anda melihat setTimeout(() => { ... }, 0), cuma ingat—ia bukan tentang masa; ia mengenai keutamaan!

Atas ialah kandungan terperinci Apakah Maksud SetTimeout(..., ) Sebenarnya dalam JavaScript? (Gelung Acara Diterangkan!). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!