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

最新推荐文章于 2024-05-31 14:59:27 发布

晨旭缘

最新推荐文章于 2024-05-31 14:59:27 发布

阅读量4.2k

点赞数

分类专栏： Javascript 前端文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/weixin_45680024/article/details/126360376

版权

前端同时被 2 个专栏收录

24 篇文章 0 订阅

订阅专栏

Javascript

17 篇文章 0 订阅

订阅专栏

本文介绍了JavaScript中的setInterval()和clearInterval()方法，用于周期性执行函数。setInterval()返回一个唯一ID，用于通过clearInterval()清除定时器。在启动定时器前，需要检查并清除已存在的定时器，防止资源浪费和数据不一致。示例代码展示了如何正确使用这两个方法来控制定时任务的启停。

摘要由CSDN通过智能技术生成

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;
  }