美文网首页
vue定时任务的设置和取消

vue定时任务的设置和取消

作者: 正强Strong | 来源:发表于2021-05-06 16:13 被阅读0次

    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();
      },
    

    相关文章

      网友评论

          本文标题:vue定时任务的设置和取消

          本文链接:https://www.haomeiwen.com/subject/tfmufltx.html