Perbincangan ringkas tentang benang Javascript dan mekanisme pemasaan

Perbincangan ringkas tentang benang Javascript dan mekanisme pemasaan_kemahiran javascript

WBOY

Lepaskan： 2016-05-16 15:51:57

asal

893 orang telah melayarinya

Penggunaan setTimeout dan setInterval

Parameter kedua setTimeout dan setInterval yang ditakrifkan dalam dokumen API Javascript masing-masing bermakna bilangan milisaat selepas fungsi panggil balik dilaksanakan dan bilangan milisaat selepas itu fungsi panggil balik dilaksanakan. Tetapi dengan pengumpulan pengalaman kerja, kami mendapati bahawa ini tidak berlaku.

Contohnya

div.onclick=function(){
  setTimeout(function(){
     document.getElementById('input').focus(); 
  },0);
}

Salin selepas log masuk

Saya tidak dapat menjelaskannya. Cuma laksanakannya dengan segera. Mengapa anda perlu menetapkan pemasa untuk berpusing-pusing?

Pada hari lain anda menulis sekeping kod berikut

setTimeout(function(){while(true){}},100);
setTimeout(function(){alert('你好');},200);

Salin selepas log masuk

Barisan pertama kod berputar tanpa henti, menyebabkan baris kedua amaran tidak pernah muncul.

Benang tunggal atau berbilang benang?
Ternyata enjin JavaScript berjalan dalam satu utas, dan penyemak imbas hanya mempunyai satu utas yang menjalankan program JavaScript. Oleh kerana reka bentuk benang tunggal, isu penyegerakan berbilang benang yang kompleks dihapuskan.

Apabila menetapkan pemasa, penyemak imbas akan memasukkan fungsi panggil balik yang anda tentukan ke dalam urutan tugas selepas masa yang ditetapkan dan bukannya melaksanakannya dengan serta-merta. Jika masa pemasaan ditetapkan kepada 0, ini bermakna urutan tugasan dimasukkan serta-merta dan bukannya dilaksanakan serta-merta Anda masih perlu menunggu tugasan dalam baris gilir dilaksanakan dan giliran anda sebelum melaksanakannya.

Jadi kod berikut muncul 2 dahulu, kemudian 1

setTimeout(function(){
  alert(1);
},0);
alert(2);

Salin selepas log masuk

Jadi, apakah kegunaan praktikal ini? Mari kita lihat contoh di bawah

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>setTimeout 0</title>
  </head>
  <body>
    输入字符，但内容却不能实时显示<input type="text" onkeydown="show(this.value)"/> <br/>
    输入字符，内容能实时显示<input type="text" onkeydown="var self=this;setTimeout(function(){show(self.value)},0)"/>
    <div></div>
    <script>
      function show(val){
        document.getElementsByTagName("div")[0].innerHTML=val;
      }
    </script>
  </body>
</html>

Salin selepas log masuk

Dalam contoh ini, enjin js perlu melaksanakan pengendali acara keydown dan kemudian mengemas kini nilai kotak input. Apabila pengendali acara dilaksanakan, tugas mengemas kini nilai hanya boleh memasuki baris gilir untuk menunggu, jadi nilai yang dikemas kini tidak boleh diperolehi apabila acara keydown dilaksanakan tetapi melalui setTimeout kami meletakkan operasi mendapatkan nilai ke dalam baris gilir dan laksanakannya selepas mengemas kini nilai, jadi Kandungan akan dipaparkan dalam masa nyata.

Kembali dan lihat kod berikut:

setTimeout(function(){
  //do something...
   setTimeout(arguments.callee,10);
},10);

setInterval(function(){
  //do something...
},10);

Salin selepas log masuk

Kedua-dua keping kod ini kelihatan mempunyai kesan yang sama, bukan? Sebenarnya, terdapat perbezaan. SetTimeout dalam fungsi panggil balik perenggan pertama ialah set masa baharu selepas enjin js dilaksanakan. Diandaikan terdapat selang masa dari penyiapan panggilan balik sebelumnya hingga permulaan panggilan balik seterusnya Secara teorinya, selang masa > ;=10ms, kod berikut <=10ms.

Bercakap mengenainya, adakah XMLHttpRequest benar-benar tak segerak? Ya, permintaan itu tidak segerak, tetapi permintaan ini ialah urutan baharu yang dibuka oleh penyemak imbas. Apabila keadaan yang diminta berubah, jika panggilan balik telah ditetapkan sebelum ini, benang tak segerak akan meletakkan peristiwa perubahan keadaan ke dalam baris gilir pemprosesan enjin js untuk menunggu untuk pemprosesan Apabila tugasan diproses, enjin js akan sentiasa melaksanakan fungsi yang ditetapkan oleh onreadystatechange dalam satu utas.

Di atas adalah keseluruhan kandungan artikel ini, saya harap anda semua menyukainya.