setInterval() 方法

     可按照指定的周期(以毫秒计)不停地调用函数或表达式,直到 clearInterval() 被调用或窗口被关闭由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。

注:定时器的this是指向 window的

提示: 如果你只想执行一次可以使用 setTimeout() 方法。

这里写图片描述

 

在该图上已经标注了触发和清除的时期,那么我们在使用中还有几个需要注意的点。

  1. 使用setInterval时this指向的问题。如果我们直接
    this.timer = setInterval(function(){要触发的函数}) 是会报错的。因为这样的话this的指向为window,但是我们要触发的函数是挂载在vm实例上面的。可以直接这样写this.timer = setInterval(() => {要触发的函数}).
  2. 使用mouted,beforeDestory时注意他们是和method平级的。

demo:
这里写图片描述
在destroyed的时候清除页面刷新的。
这里写图片描述

getMigrateDetail()替换成自己的函数就ok了。

 

mounted不能获取到data中数据的解决方法:

mounted(){  
  console.log(this.isok)     //能获取isok  10  
  setInterval(function(){   
     console.log(this.isok)   //不能获取 isok 
  }, 3000); 
}

这是为什么呢?  

原因就是:定时器的this是指向 window的。

那有什么方法来解决这个问题呢?答案是有的,两种

(1)用箭头函数:箭头函数中的this指向是固定不变(定义函数时的指向),在vue中指向vue;

mounted(){
   setInterval(()=>{ consolog.log(this.isok) }, 3000);
}

 

(2)使用 var that = this ,就可以正常调用了。

mounted(){

  var that=this;

  setInterval(()=>{

  console.log(that.isok)

  }, 3000);

}

 

参考:https://blog.csdn.net/weixin_38858002/article/details/82114774

https://blog.csdn.net/AIB_Kasic/article/details/93042344?depth_1-utm_source=distribute.pc_relevant.none-task&utm_source=distribute.pc_relevant.none-task

Logo

前往低代码交流专区

更多推荐