JavaScript清除所有(多個(gè))定時(shí)器的方法實(shí)戰(zhàn)案例
一、停止單個(gè)定時(shí)器
#在某些情況下,我們可能只需要停止單個(gè)定時(shí)器。 #在JavaScript中,我們可以使用clearTimeout()函數(shù)停止一個(gè)setTimeout()的定時(shí)器 #或者clearInterval()函數(shù)停止一個(gè)setInterval()的定時(shí)器。例如: // 創(chuàng)建一個(gè)定時(shí)器 var timer1 = setTimeout(function() { console.log("Hello world!"); }, 1000); // 停止定時(shí)器 clearTimeout(timer1); #當(dāng)執(zhí)行clearTimeout(timer1)時(shí),之前創(chuàng)建的定時(shí)器就會(huì)被停止。 #對(duì)于setInterval()的定時(shí)器,使用clearInterval()的方法也是類(lèi)似的。 #需要注意的是,clearTimeout()和clearInterval()函數(shù)都需要傳入定時(shí)器的ID作為參數(shù)。
二、暫停與恢復(fù)定時(shí)器
#除了停止某個(gè)特定的定時(shí)器之外,有時(shí)候我們也需要暫?;蛘呋謴?fù)所有的定時(shí)器。 #我們可以使用更高級(jí)的技術(shù),比如使用閉包或者對(duì)象來(lái)控制所有的定時(shí)器。例如: // 創(chuàng)建一個(gè)對(duì)象來(lái)管理所有的定時(shí)器 var timerManager = { timers: [], addTimer: function(timer) { this.timers.push(timer); }, pauseTimers: function() { for (var i = 0; i < this.timers.length; i++) { clearTimeout(this.timers[i]); } }, resumeTimers: function() { for (var i = 0; i < this.timers.length; i++) { this.timers[i] = setTimeout(this.timers[i].callback, this.timers[i].interval); } } }; // 創(chuàng)建多個(gè)定時(shí)器 var timer1 = {interval: 1000, callback: function() { console.log("Hello world!"); }}; var timer2 = {interval: 2000, callback: function() { console.log("Goodbye world!"); }}; // 添加定時(shí)器到管理器 timerManager.addTimer(timer1); timerManager.addTimer(timer2); // 暫停定時(shí)器 timerManager.pauseTimers(); // 恢復(fù)定時(shí)器 timerManager.resumeTimers(); #在此示例中,我們使用一個(gè)名為timerManager的對(duì)象來(lái)管理所有的定時(shí)器。 #addTimer()方法用于向管理器添加定時(shí)器,pauseTimers()方法用于暫停所有的定時(shí)器,resumeTimers()方法用于恢復(fù)所有的定時(shí)器。 #需要注意的是,pauseTimers()方法和resumeTimers()方法都需要遍歷定時(shí)器數(shù)組,然后使用clearTimeout()函數(shù)來(lái)清除之前創(chuàng)建的定時(shí)器。
三、使用Promise來(lái)管理定時(shí)器
#使用Promise來(lái)管理定時(shí)器是一種非常高效的方式。 #我們可以通過(guò)創(chuàng)建一個(gè)Promise來(lái)實(shí)現(xiàn)定時(shí)器并且使用resolve()和reject()方法來(lái)控制定時(shí)器的行為。例如: // 創(chuàng)建一個(gè)函數(shù)來(lái)包裝setTimeout function wait(time) { return new Promise(function(resolve, reject) { setTimeout(resolve, time); }); } // 使用Promise管理定時(shí)器 Promise.all([wait(1000), wait(2000)]).then(function() { console.log("Both timers complete!"); }); #在此示例中,我們創(chuàng)建一個(gè)名為wait的函數(shù),該函數(shù)返回一個(gè)Promise。 #在這個(gè)Promise中,我們使用setTimeout函數(shù)來(lái)實(shí)現(xiàn)一個(gè)定時(shí)器,并且使用resolve()方法來(lái)告訴Promise,當(dāng)定時(shí)器觸發(fā)時(shí)執(zhí)行resolve()回調(diào)函數(shù)。 #最后,我們使用Promise.all()方法來(lái)等待所有的定時(shí)器完成,并且在完成時(shí)觸發(fā)回調(diào)函數(shù)。這種方式相比于使用定時(shí)器數(shù)組進(jìn)行管理,更加簡(jiǎn)潔和高效。
四、使用ES6特性管理定時(shí)器
#在ES6及以上版本的JavaScript中,我們可以使用更加現(xiàn)代的方式來(lái)管理定時(shí)器。例如,使用Set和箭頭函數(shù)。 // 創(chuàng)建Set來(lái)管理定時(shí)器 const timers = new Set(); // 創(chuàng)建多個(gè)定時(shí)器 const timer1 = setTimeout(() => { console.log("Hello world!"); }, 1000); const timer2 = setTimeout(() => { console.log("Goodbye world!"); }, 2000); // 將定時(shí)器添加到Set timers.add(timer1); timers.add(timer2); // 暫停所有的定時(shí)器 for (const timer of timers) { clearTimeout(timer); }
五、案例(定時(shí)獲取頁(yè)面列表數(shù)據(jù))
定時(shí)器會(huì)生成多個(gè),即有多個(gè)定時(shí)器id,需要清除不需要的的定時(shí)器
菜單沒(méi)有選中當(dāng)前頁(yè)面,定時(shí)器也不需要
<script> // 創(chuàng)建Set來(lái)管理定時(shí)器 const timers = new Set(); export default { data() { return { } }, created() { this.loadData() }, watch: { '$route': function (val) { if (!val.path.includes("當(dāng)前頁(yè)面的path")) { // 暫停所有的定時(shí)器 for (const timer of timers) { clearTimeout(timer); }; }else{ this.loadData() } } }, beforeDestroy() { // 暫停所有的定時(shí)器 for (const timer of timers) { clearTimeout(timer); } }, methods: { // 獲取頁(yè)面數(shù)據(jù) loadData() { // 暫停所有的定時(shí)器 for (const timer of timers) { clearTimeout(timer); } let param = { ...xxx } ...API(param).then(res => { .... }).finally(() => { let timer = setTimeout(() => { this.init() }, 10000); // 將定時(shí)器添加到Set timers.add(timer); }) }, } </script>
總結(jié)
到此這篇關(guān)于JavaScript清除所有(多個(gè))定時(shí)器的文章就介紹到這了,更多相關(guān)JS清除所有定時(shí)器內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
用js實(shí)現(xiàn)判斷當(dāng)前網(wǎng)址的來(lái)路如果不是指定的來(lái)路就跳轉(zhuǎn)到指定頁(yè)面
用js實(shí)現(xiàn)判斷當(dāng)前網(wǎng)址的來(lái)路如果不是指定的來(lái)路就跳轉(zhuǎn)到指定頁(yè)面,需要的朋友可以參考下。2011-05-05詳解微信小程序開(kāi)發(fā)(項(xiàng)目從零開(kāi)始)
這篇文章主要介紹了詳解微信小程序開(kāi)發(fā)(項(xiàng)目從零開(kāi)始),小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06javascript用DIV模擬彈出窗口_窗體滾動(dòng)跟隨
可滾動(dòng)跟隨彈出框效果代碼,非常實(shí)用的應(yīng)用于網(wǎng)絡(luò)廣告2008-09-09JS實(shí)現(xiàn)canvas簡(jiǎn)單小畫(huà)板功能
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)canvas簡(jiǎn)單小畫(huà)板功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-06-06uni-app跨端自定義指令實(shí)現(xiàn)按鈕權(quán)限操作
實(shí)現(xiàn)uni-app自定義指令按鈕權(quán)限需要涉及到對(duì)于vue.config.js新增loader配置,基礎(chǔ)正則知識(shí),webpack的loader開(kāi)發(fā)和調(diào)試,以及npm本地調(diào)試和發(fā)布,接下來(lái)就從了解這些前置知識(shí)開(kāi)始,需要的朋友可以參考下2023-01-01JavaScript正則驗(yàn)證密碼強(qiáng)弱度的實(shí)現(xiàn)方法
這篇文章主要介紹了JavaScript正則驗(yàn)證密碼強(qiáng)弱度的實(shí)現(xiàn)方法,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05javascript 文字上下間隔滾動(dòng)的代碼 符合WEB標(biāo)準(zhǔn) 腳本之家修正版
javascript 文字上下間隔滾動(dòng)的代碼 符合WEB標(biāo)準(zhǔn) 腳本之家修正版,這里提供了兩個(gè)版本,第二個(gè)在firefox下運(yùn)行有些問(wèn)題大家可以修改下,第一個(gè)的高度問(wèn)題,已經(jīng)修正,其實(shí)就是簡(jiǎn)單的加了css樣式。2009-12-12