How to clear all timers in javascript

In JS, you can use the for loop and clearInterval() function to clear all timers, the How to clear all timers in javascriptntax "end=setInterval(function(){},10000);for(i=1;i

The operating environment of this tutorial: windows7 How to clear all timers in javascriptstem, javascript version 1.8.5, Dell G3 computer.

We sometimes have the need to clear all timers in the page
If we save the timer (setInterval) with a variable when we create it, then clear the timer It's very simple, just clear it (clearInterval)
For example:

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

clearInterval(timer);

But sometimes the timer created is not saved with a variable, so we cannot clear it directly
For example:

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

We have a variable timer to save the first timer, so we can directly give timer to clearInterval It will be cleared when passed in
But we did not save the second timer. We don’t know what to pass when clearInterval, which is very messed up

So how to solve this What's the problem?
Let’s first look at the rules:

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

Running results:

Obviously eaHow to clear all timers in javascript to get:
setInterval The return value is a numerical value representing the timer, and this value is incremented from 1 according to the order in which the timer is created.
Then it is not difficult to achieve our need to clear all timers in the page.
So for example There are so many timers now:

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

If you want to clear them all, you must use a loop to clear the numbers corresponding to the timer from 1 to the last created using clearInterval . But now there are a bunch of timers. We don’t know how many timers there are now, so we don’t know the number corresponding to the last created timer. So first we can be more violent

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

I just look for a large number such as 100000. Generally, there should not be more than 100000 timers on a page. Generally, timers are in the range of 1,100000. So this method can definitely achieve our needs.
But it’s still not good, after all, it’s a bit too violent. Then we need to find out the number n corresponding to the last timer created. We know that the number corresponding to the timer increases sequentially from 1, then we only need to create another timer and store it in a variable end Up, this number end is n 1, so we can find n, and then we can loop from 1 to n. Oh, remember to clear the n 1th timer just created, so the loop starts from 1 to end.

Then the code is as follows:

let end = setInterval(function () { }, 10000);
for (let i = 1; i <p>In this way we have perfectly realized the need to clear all timers in the page</p><p>Then let’s try the effect, taking Tencent Video as an example : </p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/25a396045749763fc94022f6ef2f2138-1.png?x-oss-process=image/resize,p_40" class="lazy" alt="How to clear all timers in javascript"></p><p> There is a carousel image on the homepage of Tencent Video. Carousel images are usually implemented using the <code>setInterval</code> timer. But we don't know what the variable that stores the timer of this carousel is. If we want to stop this carousel, we can use the code just now to directly stop all timers. </p><p><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/024/d9bda6a1ef7600550d417bee83b01171-2.png?x-oss-process=image/resize,p_40" class="lazy" alt="How to clear all timers in javascript"></p><p>#After executing the code just now in the console, I found that the carousel image had indeed stopped. </p><p>Wonderful! </p><p>[Recommended learning: <a href="https://www.php.cn/course/list/2.html" target="_blank">javascript advanced tutorial</a>]</p>

The above is the detailed content of How to clear all timers in javascript. For more information, please follow other related articles on the PHP Chinese website!