Javascript スレッドとタイミングメカニズムに関する簡単な説明

Javascript スレッドとタイミングメカニズムに関する簡単な説明_JavaScript スキル

WBOY

リリース： 2016-05-16 15:51:57

オリジナル

1043 人が閲覧しました

setTimeout と setInterval の使用法

Javascript API ドキュメントで定義されている setTimeout と setInterval の 2 番目のパラメーターは、それぞれコールバック関数が実行されるまでのミリ秒数とコールバック関数が実行されるまでのミリ秒数を意味します。しかし、実務経験を積むにつれ、そうではないことが分かりました。

たとえば

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

ログイン後にコピー

説明できませんが、なぜタイマーを設定してぐるぐる回す必要があるのでしょうか。

別の日、あなたは次のコードを書きました

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

ログイン後にコピー

コードの最初の行が無限にループし、2 行目のアラートが表示されないのはなぜですか?

シングルスレッドかマルチスレッドか?
JavaScript エンジンはシングルスレッドで実行され、ブラウザでは JavaScript プログラムを実行するスレッドが 1 つだけであることがわかりました。シングルスレッド設計のため、複雑なマルチスレッド同期の問題は解消されます。

タイマーを設定すると、ブラウザーは指定したコールバック関数をすぐに実行するのではなく、設定時間の経過後にタスクシーケンスに挿入します。タイミング時間が 0 に設定されている場合は、タスクシーケンスがすぐに実行されるのではなく、すぐに挿入されることを意味します。キュー内のタスクが実行されるまで待機する必要があり、タスクを実行する順番が来ます。

したがって、次のコードは最初に 2 が表示され、次に 1 が表示されます

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

ログイン後にコピー

では、これは実際にどのような用途に使えるのでしょうか?以下の例を見てみましょう

<!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>

ログイン後にコピー

この例では、JS エンジンは keydown イベントハンドラーを実行してから、入力ボックスの値を更新する必要があります。イベントハンドラーが実行されると、値を更新するタスクはキューに入って待機することしかできないため、keydown イベントの実行時に更新された値を取得することはできませんが、setTimeout を通じて値を取得する操作をキューに入れます。値を更新してから実行するとリアルタイムに内容が表示されます。

戻って次のコードを見てください:

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

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

ログイン後にコピー

これら 2 つのコードは同じ効果があるように見えますね。実際には、最初の段落のコールバック関数の setTimeout は、JS エンジンの実行後に設定される新しいタイミングであり、前のコールバックの完了から開始までの時間間隔があることを前提としています。理論的には、時間間隔 > ;=10ms、次のコード

そういえば、XMLHttpRequest って本当に非同期なのでしょうか？はい、リクエストは非同期ですが、このリクエストはブラウザによって開かれた新しいスレッドです。リクエストされた状態が変更されると、コールバックが事前に設定されている場合、非同期スレッドは状態変更イベントを JS エンジンの処理キューに入れて処理を待機します。タスクが処理されると、JS エンジンは常にで設定された関数を実行します。単一スレッドの onreadystatechange。

以上がこの記事の全内容です。皆さんに気に入っていただければ幸いです。