zoukankan      html  css  js  c++  java
  • 清除定时器 和 vue 中遇到的定时器setTimeout & setInterval问题


    2019-03更新

    找到了更简单的方法,以setinterval为例,各位自行参考

    mounted() {
        const that = this
        const timer = setInterval(function () {
          //这里是想轮循的部分
          }
        }, 4000) // 4000ms = 4s
        // 通过$once来监听定时器,在beforeDestroy钩子可以被清除。
        this.$once('hook:beforeDestroy', () => {
          clearInterval(timer) // 此处的timer即 上文const的 timer
        })
      }

    建议使用这个方法。后文可忽略

    --------------VUE项目中遇到一个问题。a.vue 文件中触发setTimeout后,使用按钮跳转至其他页面,快速返回至a.vue页面后 发现定时器仍然在走。

    例子:a.vue代码

    window.setTimeout(function(){
     window.location.href = "/serverMonitor?t="+ new Date().getTime();
    },5000)

    解决办法:

    window.setTimeout(function(){
        if(this && !this._isDestroyed){ //_isDestroyed 组件是否被销毁
            return; 
        }
        window.location.href = "/serverMonitor?t="+ new Date().getTime();
    },5000)
    

    --------------清除定时器

    定时器一般有两个

    1、setTimeout();//n毫秒后执行一次

    2、setInterval();//每隔n毫秒执行一次

    setTimeout()对应的是 clearTimeout(funName);

    setInterval()对应的是 clearInterval(funName);

      

    <script>
       var funName1 = setTimeout(function(){
           return ;
       },1000);
     
        var funName2  = setInterval(function(){
            return fun2;
        },1000)
      
        //清除Timeout的定时器,传入id(创建定时器时会返回一个id)
        clearTimeout(funName1 );
      
        //清除Interval的定时器,传入id(创建定时器时会返回一个id)
        clearInterval(funName2  );
    //也可以使用return值 来清除
    setTimeout(function(){
      console.log("33");
      return 33;
    },3000);
     clearTimeout(33);
    1
    </script>
    

      

     

  • 相关阅读:
    第 15 章 标签页和工具提示插件
    第 14 章 下拉菜单和滚动监听插件
    第 13 章 模态框插件
    第 12 章 列表组面板和嵌入组件
    第 11 章 进度条媒体对象和 Well 组件
    第 10 章 巨幕页头缩略图和警告框组件
    第 9 章 路径分页标签和徽章组件
    lock()与lockInterruptibly()的区别
    MySQL中Innodb的聚簇索引和非聚簇索引
    MySQL使用可重复读作为默认隔离级别的原因
  • 原文地址:https://www.cnblogs.com/ximiximi-blog/p/7199576.html
Copyright © 2011-2022 走看看