Maison  >  Article  >  interface Web  >  Comment effacer toutes les minuteries en javascript

Comment effacer toutes les minuteries en javascript

青灯夜游
青灯夜游original
2021-09-08 16:17:2616575parcourir

En JS, vous pouvez utiliser la boucle for et la fonction clearInterval() pour effacer tous les minuteurs, la Comment effacer toutes les minuteries en javascriptntaxe "end=setInterval(function(){},10000);for(i=1;i

Comment effacer toutes les minuteries en javascript

L'environnement d'exploitation de ce tutoriel : Comment effacer toutes les minuteries en javascriptstème Windows 7, JavaScript version 1.8.5, ordinateur Dell G3.

Parfois, nous avons besoin d'effacer tous les minuteurs de la page
Si nous enregistrons le minuteur (setInterval) avec une variable lorsque nous le créons, alors effacer le minuteur est très simple, il suffit de l'effacer directement (clearInterval) ira biensetInterval)的时候用一个变量保存了它,那么清除这个定时器很简单,直接清除(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来保存,所以可以直接把timerclearInterval传进去就清除掉了
但是第二个定时器我们没有保存它,clearInterval的时候不知道要传什么,这就很操蛋了

那么怎么解决这个问题呢?
我们首先来找一下规律:

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

运行结果:

Comment effacer toutes les minuteries en javascript

显然易得:
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="Comment effacer toutes les minuteries en javascript"></p><p>腾讯视频的首页一上来有一个轮播图,轮播图这种东西一般多是用<code>setInterval</code> Par exemple : </p>rrreee<p>Mais parfois, le minuteur créé n'est pas enregistré avec une variable, nous ne pouvons donc pas l'effacer directement<img src="https://img.php.cn/upload/article/000/000/024/d9bda6a1ef7600550d417bee83b01171-2.png" alt="Comment effacer toutes les minuteries en javascript"> Par exemple : </p>rrreee<p>Le premier minuteur que nous avons une variable <code>timer</code> pour la sauvegarder, afin que nous puissions passer directement <code>timer</code> à <code>clearInterval</code> et elle sera effacée. Mais la deuxième minuterie, nous ne l'avons pas fait. enregistrez-le, et nous ne savions pas quoi passer lorsque <code>clearInterval</code>, ce qui était vraiment foiré</p><p>Alors, comment résoudre ce problème ? </p> Voyons d'abord les règles : <p>rrreee<a href="https://www.php.cn/course/list/2.html" target="_blank">Résultats de l'opération : </a></p><img src="https://img.php.cn/upload/article/000/000/024/bd37eb409850684af5df88a0ed279297-0.png" alt=" Comment effacer toutes les minuteries en javascript">🎜🎜Évidemment facile à obtenir : la valeur de retour de 🎜<code>setInterval</code> est un type numérique représentant le timer, et cette valeur est incrémentée de 1 selon l'ordre dans lequel le timer est créé🎜 Ensuite, nous avons besoin d'effacer tous les minuteurs sur la page. Par exemple, s'il y a tant de minuteurs maintenant : 🎜rrreee🎜Si vous voulez tous les effacer, vous devez utiliser une boucle pour séquencer les nombres. 1 à la dernière minuterie créée. Utilisez <code>clearInterval</code> pour l'effacer. Mais maintenant, il y a un tas de timers. Nous ne savons pas combien de timers il y a maintenant, donc nous ne connaissons pas le numéro correspondant au dernier timer créé. Alors d'abord on peut être un peu plus violent🎜rrreee🎜Je trouve directement un grand nombre comme 100000. Généralement, il ne devrait pas y avoir plus de 100000 timers sur une page Généralement, les timers sont de l'ordre de 1,100000, donc ça. La méthode est définitivement Elle peut répondre à nos besoins. 🎜 Mais c’est quand même pas bien, après tout, c’est un peu trop violent. Ensuite, nous devons connaître le nombre n correspondant au dernier timer créé. Nous savons que le nombre correspondant au timer augmente séquentiellement à partir de 1, il suffit alors de créer un autre timer et de le stocker avec une variable end Up, ce numéro end. est n+1, nous pouvons donc trouver n, puis nous pouvons boucler de 1 à n. Oh, n'oubliez pas d'effacer le n+1ème minuteur qui vient d'être créé, donc la boucle va de 1 à la fin. 🎜🎜Ensuite, le code est le suivant :🎜rrreee🎜De cette façon, nous avons parfaitement compris la nécessité d'effacer tous les minuteurs sur la page🎜🎜Essayons ensuite l'effet, en prenant Tencent Video comme exemple :🎜🎜<img src="https://%20img.php.cn/upload/article/000/000/024/25a396045749763fc94022f6ef2f2138-1.png" alt="Comment effacer toutes les minuteries en javascript">🎜🎜Il y a une image de carrousel sur la page d'accueil des images du carrousel de Tencent. sont courants. La plupart d'entre eux sont implémentés à l'aide du timer <code>setInterval</code>, mais nous ne savons pas quelle est la variable qui stocke le timer de cette image carrousel. Si nous voulons arrêter cette image carrousel, nous pouvons. utilisez le code tout à l’heure pour arrêter directement toutes les minuteries. 🎜🎜🎜🎜🎜Après avoir exécuté le code tout à l'heure dans la console, j'ai constaté que l'image du carrousel s'était effectivement arrêtée. 🎜🎜Magnifique ! 🎜🎜【Apprentissage recommandé : 🎜Tutoriel avancé javascript🎜】🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent:Que sont nodejs et vuejsArticle suivant:Que sont nodejs et vuejs