JavaScript タイマーの仕組みの詳細な紹介

JavaScriptタイマーの動作原理

タグ(スペース区切り): JavaScriptタイマー

---

最近、ajaxの原理を調べていたら、JavaScriptタイマーの動作原理を解説している海外の記事を目にしました。私は js のシングルスレッド動作モードをよく理解しています。参考のためにここに翻訳してください。元のアドレスです。
翻訳テキスト
基本的に、JavaScript タイマーがどのように機能するかを理解することが非常に重要です。通常、js は単一のスレッドで動作します。まず、タイマーを構築および操作できる 3 つの関数を見てみましょう。

 - 启动单个定时器，在延迟后调用指定的功能。该函数返回一个唯一的ID，该Id可以用于取消定时器    var id = setTimeout(fn, delay); 
 - 类似setTimeout但不断地调用函数（每次都有延迟），直到它被取消，类似于定时任务。同上也返回唯一ID用于取消定时器    var id = setInterval(fn, delay); 
 - 接受计时器ID（由上述任一功能返回）并停止触发计时器回调。
    clearInterval(id);
    clearTimeout(id);

タイマーの内部動作を理解するには、重要な概念を探る必要があります。それは、タイマーの遅延が正確であることが保証されていないということです。ブラウザ内のすべての JavaScript は単一スレッドで実行されるため、非同期イベント (マウス クリックやタイマーなど) は実行可能な場合にのみ実行されます。これは、以下に示す図を使用すると最もよく分かります:

この図には理解すべき情報がたくさんあり、それを完全に理解することで、JavaScript の非同期実行の仕組みをより深く理解できるようになります。このグラフは 1 次元です。垂直方向には、(壁時計の) 時間がミリ秒単位で表示されます。青いボックスは、実行されている JavaScript の部分を表します。たとえば、最初の JavaScript ブロックの実行には約 18 ミリ秒かかり、ブロック上のマウス クリックには約 11 ミリ秒かかります。

JavaScript は一度に 1 つのコードしか実行できないため (シングルスレッドの性質のため)、コードの各ブロックは他の非同期イベントの進行を「ブロック」します。これは、非同期イベント (マウスのクリック、タイマーの起動、XMLHttpRequest の完了など) が発生すると、後で実行するためにキューに入れられることを意味します (このキューが実際にどのように行われるかはブラウザーによって異なります)。ブラウザーはさまざまです。ここでは簡単に説明します。説明）。

まず、JavaScript の最初のブロックで、10 ミリ秒の setTimeout と 10 ミリ秒の setInterval の 2 つのタイマーを開始します。タイマーがいつどこで開始されるかにより、コードの最初のブロックが実際に完了する前にタイマーが実際に起動します。ただし、すぐには実行されず (スレッドのせいで実行できません)、次に利用可能な瞬間に実行されるようにキューに入れられることに注意してください。

また、最初の JavaScript ブロックでは、マウスのクリックが見られます。マウス クリック イベントに関連付けられた JavaScript コールバック (ユーザーがいつアクションを実行するかわからないため、非同期とみなされます) はすぐには実行できないため、最初のタイマーと同様に、後で実行されるようにキューに入れられます。

JavaScript の最初のブロックが完了した直後に、実行中のブラウザーは次の質問をします: キュー内で実行を待っているタスクは何ですか?この場合、マウス クリック ハンドラーとタイマー コールバックの両方が待機しています。次に、ブラウザは 1 つ (マウス クリック コールバック) を選択し、すぐに実行します。タイマーは、次に実行のためにキューから取り出されるまで待機します。

マウスクリックハンドラーが実行されると、最初の間隔コールバックが実行されることに注意してください。タイマーと同様に、そのハンドラーは後で実行するためにキューに入れられます。ただし、インターバルが再度トリガーされると (タイマー プログラムの実行時)、Interval のインターバル コールバックは破棄されることに注意してください (翻訳者注: ここではよく理解できません。アドバイスを交換するためにメッセージを残してください。キューにすでに間隔があるからですか？）大きなコード ブロックの実行中に間隔コールバックを呼び出したい場合、間隔コールバックは遅延なくタスク キューに継続的に追加されます。多くの場合、ブラウザーはキューに他のタスクがなくなるまで、単純にキューにアクセスしてタスクを取得します。

実際、インターバル自体の実行中に 3 番目のインターバル コールバックが起動することがわかります。これは重要な事実を示しています。インターバルは現在実行中の内容を気にせず、無差別にキューに入れます。

最後に、2 番目の間隔コールバックの実行が完了すると、JavaScript エンジンには実行するタスクがないことがわかります。これは、ブラウザが新しい非同期イベントの発生を待機していることを意味します。再び間隔が発火すると、50ms の位置になります。ただし、今回はプログラムが実行されていないため、すぐにトリガーされます。

setTimeout と setInterval の違いをよりわかりやすく説明するために例を見てみましょう。

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

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

これら 2 つのコードは一見機能的に同等に見えるかもしれませんが、そうではありません。 setTimeout コードには、前回のコールバックの実行後に常に少なくとも 10 ミリ秒の遅延があり (最終的にはそれ以上になる可能性がありますが、10 ミリ秒を下回ることはありません)、この長いコードの実行中に毎回 setInterval が試行されることに注意してください。 10 ミリ秒ごと (翻訳者注: この長いコードの実行中、タスクは間隔なしで 10 ミリ秒ごとにキューに追加されることがわかります)。

ここで多くのことを学びました。復習しましょう:

JavaScript エンジンにはスレッドが 1 つしかないため、非同期イベントは実行のためにキューに入れられます。
setTimeout と setInterval は、非同期コードの実行方法が根本的に異なります。
タイマーの即時実行がブロックされている場合、次の可能な実行ポイントまで遅延されます (必要な遅延を超えます)。
setInterval のコールバック プログラムの実行時間が十分に長い (指定された遅延を超えている) 場合、その間隔は遅延なく実行できます (翻訳者注: 1 つのコールバックの実行が完了していない場合は別のコールバックが追加されるため)。
これらはすべて、JavaScript エンジンがどのように動作するか、特に発生する多数の非同期イベントを理解するための非常に重要な知識であり、高度なアプリケーション コードを構築するための基礎を築きます。

関連する推奨事項:

JavaScriptタイマーの動作原理

JavaScriptのタイマー原理の分析について

以上がJavaScript タイマーの仕組みの詳細な紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。