欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript清除所有(多個(gè))定時(shí)器的方法實(shí)戰(zhàn)案例

 更新時(shí)間:2024年01月25日 08:23:48   作者:Sun?Peng  
定時(shí)器就是由JS提供了一些原生方法來(lái)實(shí)現(xiàn)延時(shí)去執(zhí)行某一段代碼,下面這篇文章主要給大家介紹了關(guān)于JavaScript清除所有(多個(gè))定時(shí)器的方法,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下

一、停止單個(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)文章

最新評(píng)論