定时器setInterval()和clearInterval()的使用

setInterval()

Window 和 Worker 接口提供的 setInterval() 方法重复调用一个函数或执行一个代码片段，在每次调用之间具有固定的时间间隔

它返回一个 interval ID，该 ID 唯一地标识时间间隔，因此你可以稍后通过调用 clearInterval() 来移除定时器

clearInterval()

WindowOrWorkerGlobalScope mixin 的 clearInterval() 方法可取消先前通过 setInterval() 设置的重复定时任务

参考链接：MDN

*注意事项：启动setInterval()前需要对其返回的值做一个判断，判断是否是空值，若不是空值，则要停止定时器并将值设为空，再重新启动，如果不进行判断并赋值，有可能会造成计时器循环调用，造成资源浪费，或所用的数据不是最新数据等

示例代码：

// 开启定时器
 startTimer() {
    this.interval = null;
    if (this.interval != null) {
      // 判断计时器是否为空
      clearInterval(this.interval);
      this.interval = null;
    }
    this.interval = setInterval(() => {
      this.getThingByTenant();
    }, 5000);
  }
  
// 关闭定时器 例如跳转页面，或者新的点击事件需要关闭定时器
 closeTimer() {
    clearInterval(this.interval);
    this.interval = null;
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18