javascript怎麼清除所有定時器
在JS中,可利用for迴圈和clearInterval()函式來清除所有定時器,語法“end=setInterval(function(){},10000);for(i=1;i<=end;i++){clearInterval(i);}”。
本教程操作環境: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
來儲存,所以可以直接把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 <= end; i++) { clearInterval(i); }
這樣我們就完美的實現了清除頁面中所有定時器的需求
那麼我們來試一下效果,拿騰訊影片為例:
騰訊影片的首頁一上來有一個輪播圖,輪播圖這種東西一般多是用setInterval
定時器實現的,但是我們並不知道儲存這個輪播圖的定時器的變數是什麼,我們要停掉這個輪播圖,就可以用剛剛的程式碼直接停掉所有的定時器。
在控制檯中執行完剛剛的程式碼後,發現輪播圖確實停了。
妙啊!
【推薦學習:】
以上就是javascript怎麼清除所有定時器的詳細內容,更多請關注php中文網其它相關文章!
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/4686/viewspace-2827147/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- 純生JS輪播,定時器新增和清除定時器JS定時器
- JavaScript定時器JavaScript定時器
- JavaScript 定時器JavaScript定時器
- Win10怎麼清除所有資料?Win10電腦清除所有資料的方法和步驟Win10
- Macbook一鍵抹掉系統所有資料教程 Macbook怎麼清除所有資料?Mac
- 如何清除win10 所有資料_win10怎麼清空所有資料Win10
- JavaScript6:定時器JavaScript定時器
- 1.15 JavaScript6:定時器JavaScript定時器
- 輪播圖(JavaScript定時器)JavaScript定時器
- MYSQL定時任務-定時清除備份資料MySql
- 路由器WiFi定時開關設定教程 路由器WiFi定時開關怎麼設定?路由器WiFi
- js清除所有的cookieJSCookie
- JavaScript 定時器函式非同步原理JavaScript定時器函式非同步
- chrome禁用js怎麼設定 如何禁止chrome瀏覽器JavaScriptChromeJS瀏覽器JavaScript
- 【JavaScript定時器小案例】常見的幾種定時器實現的案例JavaScript定時器
- 從零開始再學 JavaScript 定時器JavaScript定時器
- JavaScript筆記12:控制CSS、事件、定時器JavaScript筆記CSS事件定時器
- 怎麼清除mysql登錄檔MySql
- Javascript 定時器呼叫傳遞引數的方法JavaScript定時器
- javascript定時器(setTimeout和setInterval)的使用詳解JavaScript定時器
- JavaScript淺析 -- 定時器和節流防抖JavaScript定時器
- win10怎麼清除瀏覽器下拉地址_win10怎樣清除位址列下拉選單裡的地址Win10瀏覽器
- 如何在SpringBoot中清除所有快取 ?Spring Boot快取
- javaScript(js)手寫原生任務定時器原始碼JavaScriptJS定時器原始碼
- 怎麼清除瀏覽器快取?瀏覽器快取清理的方法步驟是什麼?瀏覽器快取
- JavaScript 計時器JavaScript
- win10 定時關機命令怎麼設定 win10怎麼設定定時關機指令Win10
- Win10系統怎樣清除網路記憶_win10清除所有網路記憶的步驟Win10
- 谷歌瀏覽器怎麼清除快取 chrome瀏覽器清理快取方法介紹谷歌瀏覽器快取Chrome
- 定時器以及定時器的幾個案例定時器
- 雲伺服器怎麼設定301伺服器
- 怎麼使用路由器設定IP?路由器
- win10定時關機怎麼設定_windows10怎樣設定定時關機Win10Windows
- win10 如何定時換桌布_win10怎麼定時換桌布Win10
- Ubuntu 時間不準,怎麼設定NTP時間同步?Ubuntu
- excel表格怎麼調整所有行高 表格如何快速設定行高Excel
- 為什麼要用setTimout來做定時器?定時器
- iOS定時器iOS定時器