javascript非同期処理の仕事の構造は詳しく説明します.

3202 ワード

基本的な意味では、JavaScriptのタイマーの働きを理解することが重要です.タイマーの実行はしばしば私たちの直感的な想像と違っています.それはJavaScriptエンジンがシングルスレッドのためです.まず、次の三つの関数はどのようにタイマーを制御しているかを認識します.
var id=setTimeout(fn,delay);タイマーを初期化し、指定した時間間隔で実行します.この関数は一意のフラグID(Numberタイプ)を返します.タイマーをキャンセルするためにそれを使ってもいいです.var id=set Interval(fn,delay);-setTimeoutと似ていますが、キャンセルされるまで関数を連続的に呼び出します.clear Interval(id)clearTimeout(id);−タイマID(setTimeoutとsetIntervalの戻り値)を用いて、タイマの内部実行原理を理解するために、タイマの遅延は保証されないという重要な概念がある.すべてのJavaScriptコードはスレッド内で実行されますので、すべての非同期イベント(例えば、マウスクリックとタイマー)は実行機会がある時だけ実行されます.
このグラフには多くの情報が理解されています.それらを完全に理解すれば、JavaScriptエンジンがどのように非同期イベントを実現するかについてよく知っています.これは1次元のアイコンです.垂直方向は時間を表し、青色のブロックはJavaScriptコードの実行ブロックを表します.例えば、最初のJavaScriptコードの実行ブロックは約18 ms必要です.マウスクリックでトリガされるコードの実行ブロックは11 ms必要です.
JavaScriptエンジンは同じ時間に1つのコードしか実行しないので、JavaScript単一スレッドの性質から、JavaScriptコード毎に実行されるブロックは、他の非同期イベントの実行を「ブロック」します.これは、非同期イベントが発生したとき(例えば、マウスクリック、タイマーがトリガされた場合、またはAjax非同期要求)、これらのイベントのコールバック関数が実行待ち行列の最後に並べられます.
最初のJavaScript実行ブロックから研究を開始し、最初の実行ブロックで2つのタイマが初期化される.1つの10 msのsetTimeout()と1つの10 msのsetInterval().いつ、何処でタイマが初期化されるかによって、タイマは、実際に最初のコードブロックが実行される前にトリガされる.しかし、タイマーに結合された関数はすぐには実行されません.実際には、遅延された関数は、実行キューの最後に順番に並び、次の適切な時間を待って実行されます.
また、最初のJavaScript実行ブロックでは、マウスクリックのイベントが発生したのを見ました.この非同期イベントにJavaScriptコール関数が結びつけられています.この関数はすぐには実行されません.上のタイマーと同じように、次の適切な時に実行されるのを待って列の最後に並べられます.
最初のJavaScript実行ブロックが終了したら、ブラウザはすぐに質問します.どの関数(ステートメント)が実行されるのを待っていますか?この時、イベントハンドラ関数をマウスでクリックして、タイマーコールバック関数を実行するのを待っています.ブラウザーは選択されます.また、「タイマコールバック関数」は、次回の適切な時間を待って実行されます.
なお、「マウスクリックイベント処理関数」が実行されると、set Intervalのコールバック関数が初めてトリガされます.セットTimeoutのコールバック関数と同様に、実行キューの最後の待ち時間に並べられます.しかし、この点に注意しなければなりません.set Intervalコールコールバック関数が2回目にトリガされた場合(この時、set Timeout関数はまだ実行されています)、set Intervalの最初のトリガは破棄されます.長いコードブロックが実行されると、すべてのset Intervalコールコールコールバック関数を実行列の後ろに並べて、コードブロックが実行された後、結果としては、大きな列のset Intervalコールコールコールコールバック関数が実行されるのを待っています.これらの関数の間には、すべてが完了するまでの間隔がありません.したがって、ブラウザの傾向は、intervalの処理関数がより多くない場合、次の処理関数を列の最後に並べます.
第3のsetIntervalコールコールバック関数がトリガされると、以前のsetIntervalコールコールコールバック関数はまだ実行されていることを発見することができます.これは、現在何を実行しているかを考えずに、すべての渋滞の関数を列の最後に並べているという重要な事実を示している.これは2回のset Intervalコールコールバック関数間の時間間隔が犠牲になることを意味している.
最後に、2番目のsetIntervalコールコールバック関数が実行された後、JavaScriptエンジンの実行を待つプログラムはありません.これはブラウザが今新しい非同期イベントの発生を待っているということです.50 msにおいて、新しいsetIntervalコールコールバック関数が再びトリガされた場合、実行ブロックがブロックブロックブロックブロックブロックブロックによってブロックブロックブロックブロックブロックされずに実行された.だから、すぐに実行されます.
setTimeoutとset Intervalの違いを一例で説明しましょう.

 setTimeout ( function ( ) { 
   /* Some long block of code... */ 
  setTimeout (arguments. callee, 10 ); 
  }, 10 ); 
  
 setInterval ( function ( ) { 
   /* Some long block of code... */ 
  }, 10 );
 
この二つのコードは一見違っていませんが、違います.setTimeoutコールコールバック関数の実行と前回の実行との間の間隔は少なくとも10 ms(より多くなるかもしれないが、10 ms以下ではない)であり、set Intervalのコールバック関数は10 msごとに一回実行することを試みる.前回の実行が終了するかどうかは問わない.
ここで多くの知識を学びました.まとめてみます.
JavaScriptエンジンはシングルスレッドであり、すべての非同期イベントを強制的にキューに並べてsetTimeoutとset Intervalを実行するときに、非同期コードを実行するときに根本的な違いがあります.もし一つのタイマーがブロックされても、すぐに実行できないなら、次の実行可能な時点まで遅延します.setIntervalコールコールコールコールバック関数の実行時間が十分に長い場合(指定された時間間隔より長い場合)、それらは連続して実行され、互いに時間間隔がない.
以上述べましたが、本論文の内容は全部です.javascript非同期処理を勉強するのに役に立つと思います.