javascript怎麼清除所有計時器

青灯夜游
發布: 2023-01-07 11:47:39
原創
16668 人瀏覽過

在JS中,可利用for迴圈和clearInterval()函數來清除所有計時器,語法「end=setInterval(function(){},10000);for(i=1;i

javascript怎麼清除所有計時器

本教學操作環境:windows7系統、javascript1.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來儲存,所以可以直接把timerclearInterval#傳進去就清除掉了
但是第二個定時器我們沒有保存它,clearInterval的時候不知道要傳什麼,這就很操蛋了

那麼怎麼解決這個問題呢?
我們先來找規律:

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

運行結果:

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 <= end; i++) {
    clearInterval(i);
}
登入後複製

這樣我們就完美的實現了清除頁面中所有定時器的需求

那麼我們來試一下效果,拿騰訊影片為例:

javascript怎麼清除所有計時器

騰訊影片的首頁一上來有輪播圖,輪播圖這種東西一般多是用setInterval定時器實現的,但我們並不知道儲存這個輪播圖的計時器的變數是什麼,我們要停掉這個輪播圖,就可以用剛剛的程式碼直接停掉所有的計時器。

javascript怎麼清除所有計時器

在控制台中執行完剛剛的程式碼後,發現輪播圖確實停了。

妙啊!

【推薦學習:javascript高階教學

#

以上是javascript怎麼清除所有計時器的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板