【js】JavaScript清除所有（多个）定时器的方法：

文章目录

• • • • 一、停止单个定时器
      • 二、暂停与恢复定时器
      • 三、使用Promise来管理定时器
      • 四、使用ES6特性管理定时器
      • 五、案例（定时获取页面列表数据）

一、停止单个定时器

#在某些情况下，我们可能只需要停止单个定时器。
#在JavaScript中，我们可以使用clearTimeout()函数停止一个setTimeout()的定时器
#或者clearInterval()函数停止一个setInterval()的定时器。例如：
 
// 创建一个定时器
var timer1 = setTimeout(function() {
  console.log("Hello world!");
}, 1000);
 
// 停止定时器
clearTimeout(timer1);
 
#当执行clearTimeout(timer1)时，之前创建的定时器就会被停止。
#对于setInterval()的定时器，使用clearInterval()的方法也是类似的。
#需要注意的是，clearTimeout()和clearInterval()函数都需要传入定时器的ID作为参数。复制

二、暂停与恢复定时器

#除了停止某个特定的定时器之外，有时候我们也需要暂停或者恢复所有的定时器。
#我们可以使用更高级的技术，比如使用闭包或者对象来控制所有的定时器。例如：
 
// 创建一个对象来管理所有的定时器
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);
    }
  }
};
 
// 创建多个定时器
var timer1 = {interval: 1000, callback: function() {
  console.log("Hello world!");
}};
var timer2 = {interval: 2000, callback: function() {
  console.log("Goodbye world!");
}};
 
// 添加定时器到管理器
timerManager.addTimer(timer1);
timerManager.addTimer(timer2);
 
// 暂停定时器
timerManager.pauseTimers();
 
// 恢复定时器
timerManager.resumeTimers();
 
#在此示例中，我们使用一个名为timerManager的对象来管理所有的定时器。
#addTimer()方法用于向管理器添加定时器，pauseTimers()方法用于暂停所有的定时器，resumeTimers()方法用于恢复所有的定时器。
#需要注意的是，pauseTimers()方法和resumeTimers()方法都需要遍历定时器数组，然后使用clearTimeout()函数来清除之前创建的定时器。复制

三、使用Promise来管理定时器

#使用Promise来管理定时器是一种非常高效的方式。
#我们可以通过创建一个Promise来实现定时器并且使用resolve()和reject()方法来控制定时器的行为。例如：
 
// 创建一个函数来包装setTimeout
function wait(time) {
  return new Promise(function(resolve, reject) {
    setTimeout(resolve, time);
  });
}
 
// 使用Promise管理定时器
Promise.all([wait(1000), wait(2000)]).then(function() {
  console.log("Both timers complete!");
});
 
#在此示例中，我们创建一个名为wait的函数，该函数返回一个Promise。
#在这个Promise中，我们使用setTimeout函数来实现一个定时器，并且使用resolve()方法来告诉Promise，当定时器触发时执行resolve()回调函数。
#最后，我们使用Promise.all()方法来等待所有的定时器完成，并且在完成时触发回调函数。这种方式相比于使用定时器数组进行管理，更加简洁和高效。复制

四、使用ES6特性管理定时器

#在ES6及以上版本的JavaScript中，我们可以使用更加现代的方式来管理定时器。例如，使用Set和箭头函数。
 
// 创建Set来管理定时器
const timers = new Set();
 
// 创建多个定时器
const timer1 = setTimeout(() => {
  console.log("Hello world!");
}, 1000);
const timer2 = setTimeout(() => {
  console.log("Goodbye world!");
}, 2000);
 
// 将定时器添加到Set
timers.add(timer1);
timers.add(timer2);
 
// 暂停所有的定时器
for (const timer of timers) {
  clearTimeout(timer);
}复制

五、案例（定时获取页面列表数据）

1. 定时器会生成多个，即有多个定时器id，需要清除不需要的的定时器
2. 菜单没有选中当前页面，定时器也不需要

<script>
// 创建Set来管理定时器
const timers = new Set();
 
export default {
  data() {
    return {
  
    }
  },
  created() {
    this.loadData()
  },
  watch: {
    '$route': function (val) {
      if (!val.path.includes("当前页面的path")) {
      	 // 暂停所有的定时器
        for (const timer of timers) { clearTimeout(timer); };
      }else{
        this.loadData()
      }
    }
  },
  beforeDestroy() {
    // 暂停所有的定时器
    for (const timer of timers) { clearTimeout(timer); }
  },
  methods: {
    // 获取页面数据
    loadData() {
      // 暂停所有的定时器
      for (const timer of timers) { clearTimeout(timer); }
      let param = { ...xxx }
      ...API(param).then(res => {
        ....
      }).finally(() => {
        let timer = setTimeout(() => { this.init() }, 10000);
        // 将定时器添加到Set
        timers.add(timer);
      })
    },
}
</script>复制