vue定时任务的设置和取消

vue偶尔也会用到定时的取更新点内容之类的需求,比如最近遇到的就是每个约1分钟更新一下列表的内容。
主要就是利用created和beforeDestroy这两个回调,来创建定时器和清除定时器。

1、created函数里面,初始化一下定时器

这里的onSearch函数会每60s被调用一次,去后台获取内容。

  created() {
    this.timer = setInterval(() => {
      this.onSearch(this.pageinfo.params, this.pageinfo.current);
      this.closeExcelImportUploadDetailDialog();
    }, 1000 * 60);    
  },

2、methods里面增加一个clearTimer的函数

    clearTimer() {
      if(this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    }

3、最后在beforeDestroy()生命周期内清除定时器

之后就不会看到每60s调用一次对onSearch函数的调用

  beforeDestroy() {
    // debugger;
    this.clearTimer();
  },
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容