JS_基礎知識でsetTimeout()とsetInterval()を呼び出して実行する場合の使い方

定義
setTimeout() と setInterval() は、遅延タスクやスケジュールされたタスクを処理するためによく使用されます。 setTimeout() メソッドは、指定されたミリ秒数の後に関数または計算式を呼び出すために使用されます。一方、setInterval() は、clearInterval によってクリアされるまで、指定されたミリ秒数ごとにループ内で関数または式を呼び出すことができます。
定義から、前者が 1 回実行されるのに対し、後者は複数回実行できることを除いて、2 つの関数は非常に似ていることがわかります。2 つの関数の最初のパラメーターも同じです。 2 番目のパラメータは実行されるコードまたはハンドルです。2 つは遅延のミリ秒数です。
非常にシンプルな定義で使いやすいですが、時々コードが想像通りのタイミングで呼び出されず、非常に混乱します


簡単な例
見てください簡単な例では、単純なページを 2 秒間ロードした後、遅延アラートを書き込みます。

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

setTimeout('document.write("遅延アラート!");', 2000);

これは合理的だと思います。見てみましょう setInterVal() の例メソッド

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

var num = 0; var i = setInterval(function() {
num ;
var date = new Date();
document.write(date.getMinutes() ':' date.getSeconds() ': ' 日付。 getMilliseConds（） '＆lt; br＆gt;'）;
現在の時刻（秒：ミリ秒）は、1秒ごとに記録されます。コードの実行時間が記録されない可能性があることを考慮して、時間間隔は同じである必要があるので、結果を見てください

コードをコピー

コードは次のとおりです::38:116:39:130:40:144:41:158

:42:172

:43:186
:44:200
:45:214
:46:228
:47:242
:48:256



なぜ

時間間隔はほぼ1000ミリ秒ですが、正確ではありません。なぜですか?その理由は、JavaScript タイマーについて誤解があるためです。JavaScript は実際にはシングルスレッド環境で実行されます。つまり、タイマーは将来の特定の時間にコードの実行を計画するだけであり、特定の実行時間は保証されません。なぜなら、ページのライフサイクル中、さまざまなタイミングで他のコードが JavaScript プロセスを制御する可能性があるからです。ページがダウンロードされた後、コードの実行、イベント ハンドラー、および Ajax コールバック関数はすべて同じスレッドを使用します。実際、ブラウザーは、特定の時点で実行される特定のプログラムの優先順位を並べ替えて割り当てます。
エフェクトを拡大して、時間のかかるタスクを追加してみましょう

コードをコピーします

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

function test() {
for (var i = 0; i var div = document.createElement('div');
div.setAttribute ('id', 'testDiv');
document.body.appendChild(div);
document.body.removeChild(div);
}
}
setInterval(test, 10 );
var num = 0;
var I = SetInterval (function () {
Num;
var date = new date (); ':' date.getSeconds() ':' date


結果を確認するために別のスケジュールされたタスクを追加しました

コピーコード

コードは次のとおりです::9:222:12:482

:16:8

:19: 143
:22:631
:25:888
:28:712
:32:381
:34:146
:35:565
:37:406


効果は明ら​​かで、差はさらに小さくなりました 3 秒を超えており、差は非常に不安定です。
JavaScript はタイムライン上で実行されていると考えることができます。ページが読み込まれると、最初に実行されるのはメソッドと変数の宣言と、ページのライフサイクルの後半で使用されるデータ処理です​​。その後、JavaScript プロセスはさらにコードが実行されるのを待ちます。プロセスがアイドル状態になると、次のコード部分がトリガーされます

メインの JavaScript プロセスに加えて、次回プロセスがアイドル状態になったときにコードのキューを実行する必要もあります。ページのライフサイクルが経過するにつれて、コードは実行順にキューに追加されます。たとえば、ボタンが押されると、そのイベント ハンドラーがキューに追加され、次の可能な時点で実行されます。 Ajax 応答を受信すると、コールバック関数コードがキューに追加されます。 JavaScript のコードはすぐには実行されませんが、プロセスがアイドル状態になるとすぐに実行されます。タイマーがキュー上で機能する仕組みは、特定の時間が経過したときにコードが挿入されるというものですが、これはコードがすぐに実行されるという意味ではなく、できるだけ早く実行されるということを意味するだけです。
これを理解すると、正確な時間を制御したい場合、JavaScript の setTimeout 関数に頼ることはできないことが理解できます。


タイマーの繰り返し

setInterval() を使用して作成されたタイマーは、指定された効果が達成されたときに、次の例のように間隔をクリアするだけでコードを実行できます。


コードをコピー

コードは次のとおりです。var my_interval = setInterval(function () { if (条件 ) {

🎜>

しかし、この方法の問題は、コードが再びキューに追加される前にタイマー コードが実行されない可能性があり、その結果、ループ内の判定条件が不正確になり、コードが一時停止せずに何度も実行されることです。間。ただし、JavaScript はこの問題を解決しました。setInterval() を使用する場合、タイマーのコード インスタンスが他にない場合にのみタイマー コードがキューに挿入されます。これにより、キューに追加されるタイマー コードの最小時間間隔が指定された間隔になることが保証されます。

このようなルールには 2 つの問題があります

1.1. 一部の間隔がスキップされます
2.2. 複数のタイマーのコード実行間隔が予想よりも短くなる可能性があります
これら 2 つの欠点を補うために、setTimeout() を使用して繰り返しタイマーを実装できます

コードをコピー このように、コードは次のようになります。関数が実行されるたびに新しいタイマーが作成されます。2 番目の setTimeout() 呼び出しでは、agrument.callee を使用して現在実行中の関数への参照を取得し、別の新しいタイマーを設定します。これにより、コードの実行が完了する前に新しいタイマーが挿入されなくなり、継続的な実行を避けるために次のタイマー コードが実行されるまでに少なくとも指定された時間間隔が必要になります。

コードをコピー

コードは次のとおりです。

setTimeout(function () { var div = document.getElementById('moveDiv'); var left = parseInt(div.style.left) 5; div.style.left = left 'px'; if (left < 200) { setTimeout(arguments.callee, 50); 座標が 200 を超えると停止します。