精华内容
下载资源
问答
  • vue中使用setInterval this.chatTimer = setInterval(() => { console.log(this.chatTimer); this.chatMsg(); }, 1000); 然后再组件销毁前进行清除 beforeDestroy() { clearInterval(this.chatT...

    vue中使用setInterval

          this.chatTimer = setInterval(() => {
            console.log(this.chatTimer);
            this.chatMsg();
          }, 1000);

    然后再组件销毁前进行清除

    beforeDestroy() {
        clearInterval(this.chatTimer);
        this.chatTimer = null;
    }

    根据 setInterval 返回的 id 打印来看,请除定时器并没有成功
    1155237-20190316141258282-1198633113.png

    但是这样不行,定时器在局部更新的时候会多次赋值.更改了一种写法,加了一重判断之后依旧无法解决.

          if (!this.chatTimer) {
            this.chatTimer = setInterval(() => {
              console.log(this.chatTimer);
              this.chatMsg();
            }, 1000);
          }

    解决

    使用全局变量

         window.chatTimer = setInterval(() => {
            console.log(window.chatTimer);
            this.chatMsg();
          }, 1000);
    destroyed() {
          clearInterval(window.liaotianTimer);
        },

    最终解决

    Vue 清除定时器 setInterval 优化方案找到的一个解决方法

          const chatTimer = setInterval(() => {
            console.log(chatTimer);
            this.chatMsg();
          }, 1000);
    
          this.$once('hook:beforeDestroy', () => {
            clearInterval(chatTimer);
          })

    转载于:https://www.cnblogs.com/mybilibili/p/10542193.html

    展开全文
  • 主要介绍了vue setInterval 定时器失效的解决方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue中使用定时器setInterval this.timer=setInterval(this.fetchData,1000); clearInterval(this.timer); beforeDestroy(){ clearInterval(this.timer); },

    vue中使用定时器setInterval

    this.timer = setInterval(this.fetchData, 1000);
    
    clearInterval(this.timer);
    
     beforeDestroy() {
    
        clearInterval(this.timer);
    
     },

     

    展开全文
  • vue 定时循环 setInterval

    2021-04-13 16:28:54
    代码: <script> export default { beforeDestroy() { clearInterval(this.timer);... this.timer = setInterval(() => { this.getIpList(); //你的方法 }, 60000); }, } </script>

    代码:

    <script>
    export default {
        
    beforeDestroy() {
        clearInterval(this.timer);
      },
    created() {
    	this.getIpList(); //你的方法
        this.timer = setInterval(() => {
          this.getIpList(); //你的方法
        }, 60000);
      },
        
    }
    </script>
    
    展开全文
  • VUEsetInterval 使用记录

    千次阅读 2017-10-19 15:02:17
    比如常用的 setInterval 这个方法一般会用来做一个倒计时,比如点击发送验证码后 的倒计时这个对象是在window 下的方法,在与vue配合的时候有些问题需要注意一下第一,为了要停止计时 我们需要把 setInterval 赋值给...

    VUE 很好用,但是对有些方法支持起来有些坑
    比如常用的 setInterval

    这个方法一般会用来做一个倒计时,比如点击发送验证码后 的倒计时

    这个对象是在window 下的方法,在与vue配合的时候有些问题需要注意一下

    第一,为了要停止计时 我们需要把 setInterval 赋值给一个变量 为了之后用 clearInterval()停止计时;
    这个变量 不能用 vue 中的 data 来管理,如果使用在之后调用停止的时候无法停止,解决方法

    beforeCreate : function(){
                    window.intervalObj="";
                },

    VUE2.0的一个生命周期钩子,可以在这里给window定义一个全局的变量,
    在之后调用setInterval 时赋值给这个变量即可

    第二,在 setInterval 中调用的方法可以用vue 的 methods管理,但是在之后调用的时候,不能使用this去调用 即便转换变量

    let _that=this;

    把vue对象转成安全变量也不行,这里需要使用vue的实例名称,就是在new vue时的变量.方法名才可以,说了这么多最后上个倒计时的代码啦

    let doRegister = new Vue({
          el: '#doRegister',
          data: {
            sjyzmBtnText:'获取验证码'
          },
          beforeCreate : function(){
            //@@
            window.intervalObj="";
          },
          methods:{
            begin : function(){
                //@@
              window.intervalObj=setInterval("doRegister.countdown()",1000);
            },
            countdown :function(){
                let phongCount=this.sjyzmBtnText
                if(phongCount=="获取验证码"){
                  this.sjyzmBtnText=60;
                }else if(phongCount==0) {
                  this.sjyzmBtnText="获取验证码";
                  getPhoneCodeIs=true;
                  //@@
                  clearInterval(intervalObj);
                }else{
                  this.sjyzmBtnText=this.sjyzmBtnText-1;
                }
    
              }
          }
      });
    展开全文
  • 来自:https://www.jianshu.com/p/180957762852 侵删beforeMount... //车辆进出设置定时器,每3秒刷新一次 var self = this; clearInterval(timer); let timer = setInterval(_getCarPeopleStreamByEntraceBo...
  • Vue清除定时器setInterval优化方案

    万次阅读 2018-10-29 13:34:49
    Vue清除定时器setInterval优化方案两种方案清除定时器,开发者经常使用方案1,建议使用方案2方案1方案2其他程序化的事件侦听器 两种方案清除定时器,开发者经常使用方案1,建议使用方案2 方案1 首先我在data函数里面...
  • 主要介绍了vue 实现setInterval 创建和销毁实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • vue setInterval 定时器失效

    千次阅读 2018-10-23 17:36:26
    正常情况下,在data里定义homeSetInterval 保存定时器的ID值 ,在销毁组件是使用clearInterval方法是可行的 但在使用了如下的keep缓存模式在使用销毁模式不行了 应该使用离开路由器前方法beforeRouteLeave ...
  • 主要介绍了Vue清除定时器setInterval优化方案分享,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 另一套就是vue/nodejs封装的,需要引入import { setInterval, clearInterval } from 'timers'建议使用window对象自带的,因为不容易错。 如果一不小心只引入一个,就怎么也清不掉了。import { setInter...
  • vue中定时器setInterval使用

    千次阅读 2019-06-05 17:26:55
    自己在项目中使用setInterval,由于不正确的使用,竟然导致了浏览器崩溃,项目停止,电脑死机…可怕之极,下面详细写一下关于定时器的用法及注意事项 声明 mouted() { this.timer = setInterval(()=>{ // 要...
  • vuesetInterval的清除

    千次阅读 2019-06-12 16:30:00
    两种清除setInterval的方式: 方案一: data() { return { timer: null // 定时器名称 } }, mouted() { this.timer = (() => { ...
  • # 问题情景 今天上午,在统计博客运行时间的时候,需要持续调用...需要在vue里面,当然和jq大法,不太一样了 # 问题解决 mounted() { this.getElevatorList(); setInterval(this.getElevatorList, 15000); } ...
  • 要达到的效果,注销组建 或者页面跳转 关掉计时器 第一 1、data里定义一个变量 data() { return { setTimeOutObj:null, } }, 2、mounted(){}里 ... m.setTimeOutObj=setInterval(()=>{ a+=1 ...
  • 主要介绍了VUE中setTimeout和setInterval自动销毁案例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 主要介绍了在vue中使用setInterval的方法示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • vuesetInterval 创建和销毁

    千次阅读 2020-05-31 17:14:54
    setInterval 是间隔调用,与之类似的还有 setTimeout。这两个 API 通常用来做 ajax 短连接轮询数据。 比如有一个 logs.vue 是用来展示某个正在执行的进程产生的日志: <template> <div> <p v-for=...
  • vue中setTimeout和setInterval下的console和alert可以执行但是和this有关的不能执行 console两个this的结果(按顺序) 可以看出两个this的指向不同,因为setTimeout和setInterval这两个函数是window对象的...
  • vue setInterval 遇坑指南 及解决方案 好久没更新过博客了,最近小编遇到了一个经典的vue bug , 这里就把这个脱坑指南,给大家分享一下,闲话不多说,上代码! mounted() { this.timer = setInterval(() => { ...
  • vue 切换页面setInterval问题

    千次阅读 2018-08-09 10:31:53
    vue 是单页面应用,路由切换后,定时器并不会自动关闭,需要手动清除,当页面被销毁时,清除定时器即可。 mounted(){ clearInterval(this.timer); this.setTimer(); }, destroyed(){ clearInterval(this.timer...
  • 在页面使用定时器实现局部刷新setInterval{{item}}{{item}}export default {data(){return {totelNumber: new Array(8)}},beforeMount() {//设置定时器,每3秒刷新一次var self = this;setInterval(getTotelNumber,...
  • 今天在vue-router中使用setInterval时,发现一个问题:在A页面触发setInterval方法,跳转到B页面时,A的setInterval方法仍然继续执行, 解决方法:setInterval方法会返回一个id,在触发setInterval方法时保存这个id...
  • vue中利用setInterval实现验证码倒计时 setInterval基本用法 setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式 setInterval( function () { console.log('hello'); }, 3000) 每隔三秒...
  • vue中使用setInterval#Copythis.chatTimer = setInterval(() => { console.log(this.chatTimer); this.chatMsg(); }, 1000);然后再组件销毁前进行清除CopybeforeDestroy() { clearInterval(this.chatTimer); this...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 718
精华内容 287
关键字:

setintervalvue

vue 订阅