> 웹 프론트엔드 > 프런트엔드 Q&A > 자바스크립트에서 모든 타이머를 지우는 방법

자바스크립트에서 모든 타이머를 지우는 방법

青灯夜游
풀어 주다: 2023-01-07 11:47:39
원래의
16731명이 탐색했습니다.

JS에서는 for 루프와 ClearInterval() 함수를 사용하여 모든 타이머를 지울 수 있습니다. 구문 "end=setInterval(function(){},10000);for(i=1;i

자바스크립트에서 모든 타이머를 지우는 방법

이 튜토리얼의 운영 환경: Windows 7 시스템, JavaScript 버전 1.8.5, Dell G3 컴퓨터.

때때로 페이지의 모든 타이머를 지워야 할 때가 있습니다
타이머(setInterval)를 생성할 때 변수와 함께 저장하면 타이머를 지우는 것이 매우 간단합니다. 직접 지우면 됩니다. (clearInterval)은 괜찮을 것입니다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来保存,所以可以直接把timerclearInterval传进去就清除掉了
但是第二个定时器我们没有保存它,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 <= end; i++) {
    clearInterval(i);
}
로그인 후 복사

这样我们就完美的实现了清除页面中所有定时器的需求

那么我们来试一下效果,拿腾讯视频为例:

자바스크립트에서 모든 타이머를 지우는 방법

腾讯视频的首页一上来有一个轮播图,轮播图这种东西一般多是用setInterval 예를 들면:

rrreee

하지만 생성된 타이머가 변수와 함께 저장되지 않는 경우가 있어서 직접 지울 수는 없습니다자바스크립트에서 모든 타이머를 지우는 방법 예를 들면:

rrreee

첫 번째 타이머를 사용합니다 타이머를 저장하기 위한 변수 timer를 사용하여 clearIntervaltimer를 직접 전달할 수 있으며 두 번째 타이머는 삭제됩니다. 저장하지 않았고, clearInterval이 실행될 때 무엇을 전달해야 할지 몰랐는데, 정말 엉망이었습니다

그렇다면 이 문제를 어떻게 해결해야 할까요?

먼저 규칙을 살펴보겠습니다:

rrreee작업 결과:

 자바스크립트에서 모든 타이머를 지우는 방법🎜🎜분명히 얻기 쉽습니다: 🎜setInterval의 반환 값은 타이머를 나타내는 숫자 유형이며 이 값은 타이머가 생성된 순서에 따라 1부터 증가합니다🎜 그렇다면 페이지의 모든 타이머를 지우는 것은 어렵지 않습니다. 예를 들어, 현재 타이머가 너무 많습니다. 🎜rrreee🎜 타이머를 모두 지우려면 루프를 사용하여 1부터 숫자의 순서를 지정해야 합니다. 마지막으로 생성된 타이머를 삭제하려면 clearInterval을 사용하세요. 그런데 지금은 타이머가 몇 개나 있는지 모르기 때문에 마지막으로 생성된 타이머에 해당하는 숫자를 알 수 없습니다. 그럼 먼저 좀 더 폭력적으로 해볼 수 있겠네요🎜rrreee🎜 그냥 100000 같은 큰 숫자만 찾아요. 일반적으로 한 페이지에 타이머가 100000개를 넘지 않아야 하는데 일반적으로 타이머의 범위는 1,100000이므로 이 방법은 확실합니다. 그것은 우리의 요구를 충족시킬 수 있습니다. 🎜 그래도 좋지는 않은데, 결국 좀 너무 폭력적이네요. 그런 다음 생성된 마지막 타이머에 해당하는 숫자 n을 찾아야 합니다. 타이머에 해당하는 숫자가 1부터 순차적으로 증가한다는 것을 알고 나면 다른 타이머를 생성하여 변수 end Up에 저장하기만 하면 됩니다. n+1이므로 n을 찾을 수 있고 1부터 n까지 반복할 수 있습니다. 아, 방금 만든 n+1번째 타이머를 지워야 하므로 루프는 1부터 끝까지입니다. 🎜🎜그러면 코드는 다음과 같습니다.🎜rrreee🎜이런 식으로 우리는 페이지의 모든 타이머를 지워야 한다는 점을 완벽하게 깨달았습니다🎜🎜그런 다음 Tencent Video를 예로 들어 효과를 시도해 보겠습니다.🎜🎜자바스크립트에서 모든 타이머를 지우는 방법🎜🎜Tencent Video 홈페이지에 Carousel 사진이 있습니다. 일반적으로 대부분은 setInterval 타이머를 사용하여 구현되지만 이 캐러셀 이미지의 타이머를 저장하는 변수가 무엇인지 알 수 없습니다. 이 캐러셀 이미지를 중지하려면 다음을 사용할 수 있습니다. 모든 타이머를 직접 중지하는 코드입니다. 🎜🎜🎜🎜🎜지금 콘솔에서 코드를 실행한 후 캐러셀 이미지가 실제로 중지된 것을 발견했습니다. 🎜🎜멋지네요! 🎜🎜【추천 학습: 🎜javascript 고급 튜토리얼🎜】🎜

위 내용은 자바스크립트에서 모든 타이머를 지우는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨:
원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿