Penjelasan terperinci tentang mekanisme kerja kemahiran pemprosesan_javascript asynchronous javascript

Dari peringkat asas, adalah sangat penting untuk memahami cara pemasa JavaScript berfungsi. Pelaksanaan pemasa selalunya berbeza daripada imaginasi intuitif kami Ini kerana enjin JavaScript adalah satu-benang. Mari kita fahami dahulu bagaimana tiga fungsi berikut mengawal pemasa.

var id = setTimeout(fn, delay); - Mulakan pemasa dan kemudian laksanakannya selepas selang masa yang ditentukan. Fungsi ini mengembalikan ID bendera unik (Jenis nombor) yang boleh kita gunakan untuk membatalkan pemasa.
var id = setInterval(fn, delay); - Agak serupa dengan setTimeout, tetapi ia terus memanggil fungsi (selang masa ialah parameter kelewatan) sehingga ia dibatalkan.
clearInterval(id);, clearTimeout(id); - Gunakan ID pemasa (nilai pulangan setTimeout dan setInterval) untuk membatalkan kejadian panggilan balik pemasa
Untuk memahami kerja dalaman pemasa, terdapat konsep penting yang perlu dibincangkan: kelewatan pemasa tidak dijamin. Memandangkan semua kod JavaScript dilaksanakan dalam urutan, semua peristiwa tak segerak (seperti klik tetikus dan pemasa) hanya akan dilaksanakan apabila mereka mempunyai peluang untuk melaksanakan.

Terdapat banyak maklumat untuk difahami dalam rajah ini, dan jika anda memahaminya sepenuhnya, anda akan mempunyai pemahaman yang baik tentang cara enjin JavaScript melaksanakan peristiwa tak segerak. Ini ialah ikon satu dimensi: arah menegak mewakili masa, dan blok biru mewakili blok pelaksanaan kod JavaScript. Sebagai contoh, blok pelaksanaan kod JavaScript yang pertama mengambil masa kira-kira 18ms, blok pelaksanaan kod yang dicetuskan oleh klik tetikus mengambil masa 11ms dan seterusnya.

Memandangkan enjin JavaScript hanya melaksanakan satu kod pada satu masa (ini disebabkan oleh sifat JavaScript berbenang tunggal), setiap blok pelaksanaan kod JavaScript akan "menyekat" pelaksanaan acara tak segerak yang lain. Ini bermakna apabila peristiwa tak segerak berlaku (contohnya, klik tetikus, pemasa dicetuskan, atau permintaan tak segerak Ajax), fungsi panggil balik acara ini akan beratur pada penghujung baris gilir pelaksanaan menunggu untuk dilaksanakan (sebenarnya , kaedah beratur bergantung pada penyemak imbas Ia berbeza-beza bergantung pada peranti, jadi ini hanyalah pemudahan

Mulakan belajar dari blok pelaksanaan JavaScript pertama, di mana dua pemasa dimulakan: setTimeout() 10ms dan setInterval() 10ms. Bergantung pada masa dan tempat pemasa dimulakan (ia akan mula mengira selepas pemasa dimulakan), pemasa sebenarnya akan dicetuskan sebelum blok kod pertama menyelesaikan pelaksanaan. Walau bagaimanapun, fungsi yang terikat pada pemasa tidak akan dilaksanakan dengan serta-merta (sebab mengapa ia tidak dilaksanakan dengan segera ialah JavaScript adalah satu-benang). Sebenarnya, fungsi yang tertunda akan dibariskan pada penghujung baris gilir pelaksanaan, menunggu masa yang sesuai untuk dilaksanakan.

Selain itu, dalam blok pelaksanaan JavaScript pertama kita melihat bahawa peristiwa "klik tetikus" berlaku. Fungsi panggil balik JavaScript terikat pada peristiwa tak segerak ini (kita tidak pernah tahu bila pengguna melaksanakan acara (klik) ini, jadi ia dianggap tidak segerak Fungsi ini tidak akan dilaksanakan serta-merta, seperti pemasa di atas, Ia akan beratur di tamat baris gilir pelaksanaan, menunggu pelaksanaan pada masa yang sesuai seterusnya.

Apabila blok pelaksanaan JavaScript pertama dilaksanakan, penyemak imbas akan segera bertanya soalan: Fungsi (penyataan) yang manakah sedang menunggu untuk dilaksanakan? Pada masa ini, "fungsi pengendali acara klik tetikus" dan "fungsi panggil balik pemasa" sedang menunggu untuk dilaksanakan. Penyemak imbas akan memilih satu (sebenarnya pilih "fungsi pengendali untuk acara klik tetikus", kerana ia boleh dilihat dari gambar bahawa ia beratur dahulu) dan laksanakannya dengan segera. "Fungsi panggil balik pemasa" akan menunggu masa yang sesuai seterusnya untuk dilaksanakan.

Perhatikan bahawa apabila "fungsi pengendali acara klik tetikus" dilaksanakan, fungsi panggil balik setInterval dicetuskan buat kali pertama. Seperti fungsi panggil balik setTimeout, ia akan beratur ke penghujung baris gilir pelaksanaan dan menunggu untuk pelaksanaan. Walau bagaimanapun, pastikan anda memberi perhatian kepada perkara ini: apabila fungsi panggil balik setInterval dicetuskan untuk kali kedua (fungsi setTimeout masih dilaksanakan pada masa ini) pencetus pertama setInterval akan dibuang. Apabila blok kod yang panjang dilaksanakan, semua fungsi panggilan balik setInterval mungkin beratur di belakang baris gilir pelaksanaan Selepas blok kod dilaksanakan, hasilnya akan menjadi satu siri besar fungsi panggil balik setInterval yang menunggu untuk dilaksanakan, dan antara fungsi ini. Tiada selang sehingga semuanya selesai. Oleh itu, penyemak imbas cenderung untuk beratur pengendali seterusnya ke penghujung baris gilir apabila tiada lagi pengendali selang dalam baris gilir (ini disebabkan oleh isu selang).

Kita dapati bahawa apabila fungsi panggil balik setInterval ketiga dicetuskan, fungsi panggil balik setInterval sebelumnya masih dilaksanakan. Ini menggambarkan fakta yang sangat penting: setInterval tidak mempertimbangkan perkara yang sedang dilaksanakan, tetapi baris gilir semua fungsi yang disekat ke penghujung baris gilir. Ini bermakna selang masa antara dua fungsi panggilan balik setInterval akan dikorbankan (dikurangkan).

Akhir sekali, apabila fungsi panggil balik setInterval kedua dilaksanakan, kita dapat melihat bahawa tiada program menunggu enjin JavaScript untuk dilaksanakan. Ini bermakna penyemak imbas kini sedang menunggu peristiwa tak segerak baharu berlaku. Pada 50ms, fungsi panggil balik setInterval baharu dicetuskan lagi Pada masa ini, tiada blok pelaksanaan menghalang pelaksanaannya. Jadi ia akan dilaksanakan dengan segera.

Mari kita gunakan contoh untuk menjelaskan perbezaan antara setTimeout dan setInterval:

 setTimeout ( function ( ) { 
   /* Some long block of code... */ 
  setTimeout (arguments. callee, 10 ); 
  }, 10 ); 
  
 setInterval ( function ( ) { 
   /* Some long block of code... */ 
  }, 10 );
 

Dua baris kod ini mungkin kelihatan tidak berbeza pada pandangan pertama, tetapi ia berbeza. Selang antara pelaksanaan fungsi panggil balik setTimeout dan pelaksanaan sebelumnya ialah sekurang-kurangnya 10ms (mungkin lebih, tetapi tidak kurang daripada 10ms), manakala fungsi panggil balik setInterval akan cuba untuk melaksanakan setiap 10ms, tanpa mengira sama ada pelaksanaan terakhir telah selesai.

Kami telah belajar banyak di sini, untuk meringkaskan:

Enjin JavaScript adalah satu benang, memaksa semua acara tak segerak dibariskan untuk pelaksanaan
Terdapat perbezaan asas antara setTimeout dan setInterval apabila melaksanakan kod tak segerak
Jika pemasa disekat dan tidak dapat dilaksanakan serta-merta, ia akan menangguhkan pelaksanaan sehingga titik masa pelaksanaan yang mungkin seterusnya (yang lebih lama daripada selang masa yang dijangkakan)
Jika masa pelaksanaan fungsi panggil balik setInterval akan cukup lama (lebih lama daripada selang masa yang ditentukan), ia akan dilaksanakan secara berterusan dan tanpa selang masa antara satu sama lain.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu semua orang dalam mempelajari pemprosesan tak segerak javascript.