setTimeout と setInterval の違いを本当に理解していますか?_javascript スキル

スケジュールされた呼び出しを実装する 2 つの関数を、呼び出された関数がタイム スライス内で同時に実行されると誤って解釈する可能性もありますが、実際はそうではありません。状況としては、JavaScript はブラウザの JavaScript エンジンでシングルスレッド方式で実行されます。setTimeout と setInterval の機能は、設定した時点で JS エンジンによって維持されるコード キューに実行するコードを挿入するだけです。コードキューを挿入しても、コードがすぐに実行されるわけではありません。これを理解することが重要です。

まず setTimeout について説明します。

コードをコピー コードは次のとおりです:

function click() {
//コード ブロック 1.. .
setTimeout(function() {
// 処理 ...
},
// コード ブロック 2
}

ボタンの onclick イベントがこのメソッドにバインドされているとします。ボタンを押すと、block1 の内容が最初に実行され、次に setTimeout の場所まで実行され、ブラウザに「200 ミリ秒後に、実行されるコードが挿入されます。" "キューに" とブラウザは確かに同意しました (コードの挿入は即時実行を意味するわけではないことに注意してください)。setTimeout コードが実行された後、それに続く block2 コードの実行が開始されます。問題はここから始まります。 ブロック 2 のコードの実行時間が 200 ミリ秒を超えた場合、結果はどうなるでしょうか? おそらく、これまでの理解によれば、200 ミリ秒に達するとすぐにプロセス コードが実行されると考えるでしょう。すぐに...実際には、ブロック2の実行中（実行200ms後）、プロセスコードはコードキューに挿入されますが、クリックメソッドの実行が完了するまでプロセスコードセグメントは実行されません。コードキューでは、処理コードはクリックの後ろにあります。また、js はシングルスレッドで実行されるため、ブロック 2 コードの実行時間が 200ms 未満の場合は、setTimeout が挿入されます。 200ms後にプロセスコードがコードキューに挿入され、その時点で実行スレッドがすでにアイドル状態である可能性があります。その場合、結果は200ms後に表示されます。プロセスコードはキューに挿入された直後に実行されます。
setInterval
を見てください:
1. 時間間隔がスキップされる可能性があります
2. 時間間隔が

コードをコピーします コードは次のとおりです:

function click() {
// code block1...
setInterval(function() {
// プロセス ...
}, 200 );
// コード ブロック 2
}

上記と同様に、クリックによって setInterval がトリガーされ、1 つおきの期間ごとにプロセス コードが実行されると仮定します

たとえば、onclick は 300 ミリ秒で実行する必要があり、block1 コードが実行され、setInterval が 5 ミリ秒で実行され、これが 205 ミリ秒でプロセス コードが挿入され、クリック コードが正常に終了し、プロセス コードが実行される時点です。 (図に相当する) タイマー コード) が実行されますが、プロセス コードも比較的長時間実行され、次の挿入時点の 405 ミリ秒を超えます。このようにして、コード キューの後に別のプロセス コードが挿入され、プロセスは実行を続け、挿入時間が 605 ミリ秒を超えました。ここで質問が生じます。コード キューの後に別のプロセス コードが挿入されると考えることもできます。実際の状況は、すでに実行されていないプロセスがあるということです。コードキュー内のプロセスコードの挿入時間は 605ms です。js エンジンでは未実行のプロセスコードが 1 つしか許可されないため、ポイントは「容赦なく」スキップされます。 >

この場合、より適切な形式のコードを使用できます

コードをコピーします コードは次のとおりです:

setTimeout(function(){

//処理
setTimeout(arguments.callee, interval);
}, interval);

これについては、少し考えてみると、タイム ポイントがスキップされる問題がなくなることがわかると思います。参考になれば幸いです。自分の英語が難しいと感じたら、それをはっきりと表現してください。基本はしっかりしているので、直接見ることができます

には、高度なタイマーに関するセクションが含まれています。個人的には、この本はゼロから始めたい人にとっても、参考として目を通すだけの人にとっても非常に良い本だと思います。非常に優れたフロントエンド開発エンジニア:)