JavaScriptタイマーの詳しい説明

今回は、JavaScriptのタイマーの詳しい説明と、JavaScriptのタイマーを使用する際の注意点をご紹介します。

非同期タスクの イベント を配置することに加えて、「Task Queue」は時間指定イベント、つまりコードが実行されるまでの時間を指定することもできます。これは「timer」（タイマー）関数と呼ばれ、定期的に実行されるコードです。

タイマー関数は主に 2 つの setTimeout() と setInterval() によって実行されます。それらの内部動作メカニズムはまったく同じです。違いは、前者で指定されたコードが 1 回だけ実行されることです。繰り返し。以下では主に setTimeout() について説明します。

setTimeout() は 2 つのパラメータを受け入れます。1 つ目は

コールバック関数、2 つ目は実行を遅らせるミリ秒数です。

console.log(1);setTimeout(function(){console.log(2);},1000);console.log(3);

上記のコードの実行結果は 1, 3, 2 です。 setTimeout() は、2 行目の実行を 1000 ミリ秒後まで延期します。

setTimeout() の 2 番目のパラメーターが 0 に設定されている場合、現在のコードが実行された (実行スタックがクリアされた) 後、指定されたコールバック関数がすぐに (0 ミリ秒間隔) 実行されることを意味します。

setTimeout(function(){console.log(1);}, 0);console.log(2);

上記のコードの実行結果は常に 2, 1 になります。これは、2 行目が実行された後でのみであるためです。 , システムは「タスクキュー」内のコールバック関数を実行します。

つまり、 setTimeout(fn,0) の意味は、メインスレッドの利用可能な最も早いアイドル時間に実行されるタスク、つまり、できるだけ早く実行されるタスクを指定することです。 「タスクキュー」の最後にイベントを追加するため、同期タスクと「タスクキュー」内の既存のイベントが処理されるまで実行されません。

HTML5規格では、setTimeout()の第2パラメータの最小値(最短間隔)は4ミリ秒以上と規定されており、この値より小さい場合は自動的に増加します。これより前の古いブラウザでは、最小間隔が 10 ミリ秒に設定されていました。さらに、これらの DOM 変更 (特にページの再レンダリングを伴う変更) は通常、すぐには実行されず、16 ミリ秒ごとに実行されます。このとき、setTimeout()よりもrequestAnimationFrame()を使用した方が効果が高くなります。

setTimeout() はイベントを「タスクキュー」に挿入するだけであることに注意してください。メインスレッドは、指定されたコールバック関数を実行する前に、現在のコード (実行スタック) が完了するまで待機する必要があります。現在のコードに時間がかかる場合は、長時間かかる可能性があるため、setTimeout() で指定された時間にコールバック関数が実行されることを保証する方法はありません。

この記事の事例を読んだ後は、この方法を習得したと思います。さらに興味深い情報については、php 中国語 Web サイト

その他の関連記事に注目してください。

推奨読書:

JavaScript実行メカニズムのイベントループ

JavaScript実行メカニズムのイベントとコールバック関数

JavaScript実行メカニズムのタスクキュー

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