Memahami utas tunggal dalam kemahiran javascript timer_javascript

1. Enjin JavaScript adalah satu benang

Seperti yang anda boleh lihat daripada kod di bawah, kod pertama menggunakan setTimeout ialah gelung tak terhingga Memandangkan ia adalah satu urutan, dua pemasa berikut tidak mempunyai peluang untuk melaksanakan.

<script type="text/javascript">
 setTimeout( function(){ while(true){} } , 100); 
 setTimeout( function(){ alert('你好!setTimeout'); } , 200); 
 setInterval( function(){ alert('你好!setInterval'); } , 200); 
</script>

Inti penyemak imbas adalah berbilang benang Ia bekerjasama antara satu sama lain di bawah kawalan kernel untuk mengekalkan penyegerakan Penyemak imbas melaksanakan sekurang-kurangnya 3 utas pemastautin: utas enjin javascript, utas pemaparan GUI dan utas pencetus peristiwa penyemak imbas. .

Enjin JavaScript adalah berdasarkan pelaksanaan satu utas dipacu peristiwa Enjin JS telah menunggu ketibaan tugasan dalam baris gilir tugasan dan kemudian memprosesnya Pelayar hanya mempunyai satu rangkaian JS yang menjalankan program JS masa.
Benang pemaparan GUI bertanggungjawab untuk memaparkan antara muka penyemak imbas ini akan dilaksanakan apabila antara muka perlu dicat semula (Cat semula) atau apabila aliran semula (aliran semula) disebabkan oleh operasi tertentu. Walau bagaimanapun, perlu diingatkan bahawa utas pemaparan GUI dan enjin JS adalah saling eksklusif Apabila enjin JS dilaksanakan, utas GUI akan digantung, dan kemas kini GUI akan disimpan dalam baris gilir dan dilaksanakan serta-merta apabila enjin JS dihidupkan. terbiar.
Urutan pencetus peristiwa penyemak imbas Apabila peristiwa dicetuskan, utas akan menambah acara pada penghujung baris gilir yang belum selesai dan menunggu untuk diproses oleh enjin JS. Peristiwa ini boleh datang daripada blok kod yang sedang dilaksanakan oleh enjin JavaScript seperti setTimeOut, atau daripada utas lain dalam kernel penyemak imbas seperti klik tetikus, permintaan tak segerak AJAX, dsb. Walau bagaimanapun, disebabkan perhubungan satu benang JS, semua peristiwa ini perlu beratur untuk diproses oleh enjin JS.

Seperti yang dapat dilihat dari gambar di atas, enjin JavaScript dalam penyemak imbas adalah didorong oleh peristiwa. Peristiwa di sini boleh dianggap sebagai pelbagai tugas yang diberikan oleh penyemak imbas dalam baris gilir tugasan , disebabkan oleh perhubungan satu benang, tugasan ini perlu dibariskan dan diproses oleh enjin satu demi satu.

t1, t2....tn mewakili titik masa yang berbeza, dan petak kecil yang sepadan di bawah tn mewakili tugasan pada titik masa itu.

t1 kali:

1. Urutan pemaparan GUI
2. Urutan pencetus peristiwa penyemak imbas:
Dalam tempoh masa t1, pengguna mula-mula mengklik butang tetikus Klik ditangkap oleh urutan pencetus peristiwa penyemak imbas dan membentuk peristiwa klik tetikus Seperti yang dapat dilihat dari rajah, untuk urutan enjin JavaScript, peristiwa ini dihantar secara tidak segerak daripada benang lain Di penghujung baris gilir tugasan, kerana enjin sedang memproses tugasan pada t1, acara klik tetikus ini sedang menunggu untuk diproses.
3. Urutan pencetus masa:
Kaunter pemasaan model penyemak imbas di sini tidak dikira oleh enjin JavaScript, kerana enjin JavaScript adalah satu-benang Jika ia berada dalam keadaan benang yang disekat, ia tidak boleh mengira masa dan masa pencetus. jadi acara pemasaan dalam baris gilir ialah peristiwa Asynchronous.
4. Dalam tempoh masa t1 ini, selepas peristiwa klik tetikus dicetuskan, setMasa tamat masa yang ditetapkan sebelum ini juga tiba Pada masa ini, untuk enjin JavaScript, benang pencetus masa menjana peristiwa pemasaan tak segerak dan meletakkannya dalam baris gilir tugas. . Acara ini beratur selepas panggilan balik acara klik, menunggu untuk diproses. Dengan cara yang sama, masih dalam tempoh t1, pemasa setInterval juga ditambah seterusnya Kerana ia adalah pemasa selang, ia dicetuskan dua kali berturut-turut dalam tempoh t1 diproses.
5. Permintaan tak segerak Ajax:
Penyemak imbas membuka permintaan utas http baharu Apabila status permintaan berubah, jika panggilan balik telah ditetapkan sebelum ini, utas tak segerak akan menjana peristiwa perubahan status dan meletakkannya dalam baris gilir pemprosesan enjin JavaScript untuk menunggu pemprosesan.
2. Susunan pelaksanaan tugas adalah berbeza, dan hasil paparan juga berbeza

1) Fungsi setTimeout tidak digunakan

Contoh kod yang terdapat di Internet digunakan di sini untuk menunjukkan.

<a href="#" id="doBtn">do something</a>
<div id="status"></div>
<script type="text/javascript">
  var doBtn = document.getElementById('doBtn')
   , status = document.getElementById('status');

  function sleep(ms) {
  var start = new Date();
  while (new Date() - start <= ms) {}
  }
  
  doBtn.onclick = function(e) {
   status.innerHTML = 'doing...please wait...'; 
   sleep(3000); // 模拟一个耗时较长的计算过程，3s
   status.innerHTML = 'done'; 
   return false;
  };
</script>

Saya melaksanakan kod di atas dalam firefox. Rancangannya adalah untuk mengklik butang "lakukan sesuatu", kemudian memaparkan "melakukan...sila tunggu...", kemudian laksanakan tidur, dan akhirnya memaparkan "selesai".

Tetapi hasilnya ialah selepas mengklik, penyemak imbas tersekat selama kira-kira 3 saat, dan akhirnya paparan dilakukan secara langsung.

Daripada analisis, dapat dilihat bahawa apabila menetapkan status.innerHTML, utas pemaparan GUI perlu dilaksanakan, tetapi utas enjin JavaScript masih dilaksanakan, dan utas enjin JavaScript dan utas pemaparan GUI adalah saling eksklusif, jadi pada akhirnya dilakukan ditunjukkan.

2) Gunakan fungsi setTimeout

<a href="#" id="doBtn2">do something timer</a>
<div id="status2"></div>
<script type="text/javascript">
  var doBtn2 = document.getElementById('doBtn2')
   , status2 = document.getElementById('status2');

  function sleep2(ms) {
  var start = new Date();
  while (new Date() - start <= ms) {}
  }
  
  doBtn2.onclick = function(e) {
   status2.innerHTML = 'doing...please wait...'; 
   setTimeout(function() {
   sleep2(3000); 
   status2.innerHTML = 'done'; 
   }, 100); 
   return false;
  };
</script>

Tambahkan setTimeout selepas "melakukan...sila tunggu..." untuk menangguhkan pelaksanaan dan memberi masa kepada penyemak imbas untuk membuat pada masa ini, perkataan "melakukan...sila tunggu..." akan dipaparkan. kemudian laksanakan fungsi tidur, dan akhirnya memaparkan "selesai".

Sesetengah netizen kemudiannya mendapati bahawa ia tidak berfungsi dalam Firefox Kemudian saya mengubah suai kod dan meletakkan pengisytiharan pembolehubah tempatan dan pengikatan onclick ke dalam acara tetingkap.onload , , Saya akan melakukan operasi skrip sekali lagi.

<script type="text/javascript">
  function sleep(ms) {
  //...
  }
  window.onload = function() {
   var doBtn = document.getElementById('doBtn'),
   status = document.getElementById('status');
   
   var doBtn2 = document.getElementById('doBtn2')
    , status2 = document.getElementById('status2');
    
   doBtn.onclick = function(e) {
    //...
   };
   doBtn2.onclick = function(e) {
    //...
   };
  };
</script>

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.