So löschen Sie alle Timer in Javascript

In JS können Sie die for-Schleife und die Funktion clearInterval() verwenden, um alle Timer zu löschen, die Syntax „end=setInterval(function(){},10000);for(i=1;i

Die Betriebsumgebung dieses Tutorials: Windows 7-System, JavaScript-Version 1.8.5, Dell G3-Computer.

Manchmal müssen wir alle Timer auf der Seite löschen
Wenn wir den Timer (setInterval) beim Erstellen mit einer Variablen speichern, ist das Löschen des Timers sehr einfach, löschen Sie ihn einfach direkt (clearInterval) ist in OrdnungsetInterval)的时候用一个变量保存了它，那么清除这个定时器很简单，直接清除(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传进去就清除掉了
但是第二个定时器我们没有保存它，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储存起来，这个数end就是n+1，这样我们就求出n了，然后就可以从1循环到n了，哦，记得还有把刚刚创建的第n+1个定时器给清除掉，所以循环是从1到end。

那么代码如下：

let end = setInterval(function () { }, 10000);
for (let i = 1; i <p>这样我们就完美的实现了清除页面中所有定时器的需求</p><p>那么我们来试一下效果，拿腾讯视频为例：</p><p><img src="https://img.php.cn/upload/article/000/000/024/25a396045749763fc94022f6ef2f2138-1.png" alt="So löschen Sie alle Timer in Javascript"></p><p>腾讯视频的首页一上来有一个轮播图，轮播图这种东西一般多是用<code>setInterval</code> Zum Beispiel: </p>rrreee<p>Aber manchmal wird der erstellte Timer nicht mit einer Variablen gespeichert, sodass wir ihn nicht direkt löschen können<img src="https://img.php.cn/upload/article/000/000/024/d9bda6a1ef7600550d417bee83b01171-2.png" alt="So löschen Sie alle Timer in Javascript"> Zum Beispiel: </p>rrreee<p>Der erste Timer, den wir verwenden eine Variable <code>timer</code>, um den Timer zu speichern, sodass wir <code>timer</code> direkt an <code>clearInterval</code> übergeben können und er gelöscht wird. Aber den zweiten Timer haben wir nicht. Wir konnten es nicht speichern und wussten nicht, was wir bei <code>clearInterval</code> übergeben sollten, was wirklich durcheinander war</p><p>Wie kann man dieses Problem lösen? </p> Schauen wir uns zunächst die Regeln an: <p>rrreee<a href="https://www.php.cn/course/list/2.html" target="_blank">Operationsergebnisse: </a></p><img src="https://img.php.cn/upload/article/000/000/024/bd37eb409850684af5df88a0ed279297-0.png" alt=" So löschen Sie alle Timer in Javascript">🎜🎜Natürlich einfach zu bekommen: Der Rückgabewert von 🎜<code>setInterval</code> ist ein numerischer Typ, der den Timer darstellt, und dieser Wert wird entsprechend der Reihenfolge, in der der Timer erstellt wird, von 1 an erhöht🎜 Dann ist die Notwendigkeit, alle Timer auf der Seite zu löschen, nicht schwer zu erreichen. Wenn es jetzt beispielsweise so viele Timer gibt: 🎜rrreee🎜Wenn Sie sie alle löschen möchten, müssen Sie eine Schleife verwenden, um die Zahlen zu sequenzieren 1 bis zum zuletzt erstellten Timer. Verwenden Sie <code>clearInterval</code>, um ihn zu löschen. Aber jetzt gibt es eine Menge Timer. Wir wissen nicht, wie viele Timer es jetzt gibt, also kennen wir nicht die Anzahl, die dem zuletzt erstellten Timer entspricht. Also können wir zunächst etwas heftiger vorgehen🎜rrree🎜Ich finde direkt eine große Zahl wie 100.000. Im Allgemeinen sollte es nicht mehr als 100.000 Timer auf einer Seite geben. Im Allgemeinen liegen Timer im Bereich von 1.100.000 Methode ist definitiv Es kann unsere Bedürfnisse erfüllen. 🎜 Aber es ist immer noch nicht gut, schließlich ist es etwas zu heftig. Dann müssen wir die Nummer n herausfinden, die dem zuletzt erstellten Timer entspricht. Wir wissen, dass die Nummer, die dem Timer entspricht, sequentiell von 1 an zunimmt. Dann müssen wir nur noch einen weiteren Timer erstellen und ihn mit einer Variablen speichern ist n+1, also können wir n finden und dann eine Schleife von 1 bis n durchführen. Denken Sie daran, den gerade erstellten n+1-Timer zu löschen, damit die Schleife von 1 bis zum Ende verläuft. 🎜🎜Dann lautet der Code wie folgt:🎜rrreee🎜Auf diese Weise haben wir die Notwendigkeit, alle Timer auf der Seite zu löschen, perfekt erkannt🎜🎜Dann probieren wir den Effekt am Beispiel von Tencent Video aus:🎜🎜<img src="%E2%80%9Ehttps://" img.php.cn alt="So löschen Sie alle Timer in Javascript">🎜🎜Auf der Homepage von Carousel Pictures gibt es ein Karussellbild Im Allgemeinen werden die meisten von ihnen mit dem Timer <code>setInterval</code> implementiert, aber wir wissen nicht, welche Variable den Timer dieses Karussells speichert. Wenn wir dieses Karussell stoppen möchten, können wir den Code verwenden gerade jetzt, um alle Timer direkt zu stoppen. 🎜🎜🎜🎜🎜Nachdem ich gerade den Code in der Konsole ausgeführt hatte, stellte ich fest, dass das Karussellbild tatsächlich gestoppt war. 🎜🎜Wunderbar! 🎜🎜【Empfohlenes Lernen: 🎜Javascript-Tutorial für Fortgeschrittene🎜】🎜

Das obige ist der detaillierte Inhalt vonSo löschen Sie alle Timer in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!