JavaScriptですべてのタイマーをクリアする方法

JS では、for ループと clearInterval() 関数を使用してすべてのタイマーをクリアできます。構文 "end=setInterval(function(){},10000);for(i=1;i

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

ページ内のすべてのタイマーをクリアする必要がある場合があります。
タイマー (setInterval) を作成するときに変数を使用して保存すると、タイマーをクリアします。これは非常に簡単です。 、クリアするだけです (clearInterval)
例:

let timer = setInterval(function () {
    console.log('timer');
}, 1000);

clearInterval(timer);

ただし、作成されたタイマーが変数とともに保存されていない場合があるため、直接クリアすることはできません
たとえば:

let timer = setInterval(function () {
    console.log('timer');
}, 1000);
setInterval(function () {
    console.log('timer');
}, 1000);
clearInterval(timer);
clearInterval(/* ??? */); // 操蛋

最初のタイマーを保存するための変数 timer があるため、timer を clearInterval に直接与えることができます。これを渡すとクリアされます。
しかし、2 番目のタイマーを保存しませんでした。clearInterval のときに何を渡せばよいかわかりません。これは非常に混乱しています

それで、これをどうやって解決するのですか? 何が問題なのでしょうか?
まずルールを見てみましょう:

for (let i = 0; i < 10000; i++) {
    let t = setInterval(function () { }, 1000);
    console.log(t);
}

実行結果:

明らかに簡単に取得できます:
setInterval戻り値はタイマーを表す数値であり、この値はタイマーが作成された順序に従って 1 から増加します。
したがって、ページ内のすべてのタイマーをクリアするというニーズを達成することは難しくありません。 ## したがって、たとえば、現在非常に多くのタイマーがあります:

let t = setInterval(function () { }, 1000);
let r = Math.random() * 100;
for (let i = 0; i < r; i++) {
    setInterval(function () { }, 1000);
}

それらをすべてクリアしたい場合は、ループを使用して、

を使用して 1 から最後に作成されたタイマーに対応する数値をクリアする必要があります。 clearInterval 。しかし、現在は大量のタイマーが存在しており、現在いくつのタイマーがあるのか​​がわからないため、最後に作成されたタイマーに対応する番号もわかりません。したがって、最初はもっと暴力的になることができます

for (let i = 1; i < 100000; i++) {
    clearInterval(i);
}

私は、100000 などの大きな数値を探します。通常、ページ上には 100000 を超えるタイマーがあってはなりません。通常、タイマーの範囲は 1,100000 です。したがって、この方法は間違いなく私たちのニーズを達成できます。

でも、やはりダメですね、ちょっと乱暴すぎるんです。次に、最後に作成したタイマーに対応する数値 n を見つける必要があります。タイマーに対応する数値は 1 から順番に増加することがわかっているので、別のタイマーを作成して変数 end Up に格納するだけで済みます。この数値は endは n 1 なので、n を見つけることができ、1 から n までループできます。ああ、作成したばかりの n 1 番目のタイマーをクリアすることを忘れないでください。これにより、ループが 1 から開始して終了します。

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

let end = setInterval(function () { }, 10000);
for (let i = 1; i このようにして、ページ内のすべてのタイマーをクリアする必要性を完全に認識しました<p></p>次に、Tencent を使用して効果を試してみましょう。ビデオの例: <p></p><p><img src="https://img.php.cn/upload/article/000/000/024/25a396045749763fc94022f6ef2f2138-1.png" alt="JavaScriptですべてのタイマーをクリアする方法"></p> Tencent Video のホームページにカルーセル画像があります。カルーセル画像は通常、<p>setInterval<code> タイマーを使用して実装されます。このカルーセルのタイマーを格納する変数が何であるかわかりません。このカルーセルを停止したい場合は、先ほどのコードを使用してすべてのタイマーを直接停止できます。 </code></p><p><img src="https://img.php.cn/upload/article/000/000/024/d9bda6a1ef7600550d417bee83b01171-2.png" alt="JavaScriptですべてのタイマーをクリアする方法"></p>#コンソールでコードを実行したところ、カルーセル画像が実際に停止していることがわかりました。 ＃＃＃＃＃＃素晴らしい！ <p></p>[推奨学習: <p>JavaScript 上級チュートリアル</p>]<p></p>

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