vue定时执行（vue项目使用定时器每隔几秒运行一次某方法）

代码如下： data() { return {   timer:null, //定时器名称 } }                      ， created() { this.setTime(); }, beforeDestroy(){ clearInterval(this.timer);　　// 清除定时器 this.timer = null; }, methods: { 　　setTime(){ 　　//每隔一分钟运行一次保存方法     this.timer = setInterval(()=>{     this.saveList();     },60000)   },   saveList(){       } }

上面这样写已经实现功能
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  
 
  ，关闭页面不会继续执行 
  
  
  
  
  
  
  
  
  
  
 。长时间运行页面也没有卡死 
  
  
  
  
  
  
  
  
  
  
 。

有人说





















，setInterval（）里面嵌套setTimeout（）

setinterval不会清除定时器队列  
  
  
  
  
  
  
  
  
  
  
，每重复执行1次都会导致定时器叠加 
  
  
  
  
  
  
  
  
  
  
 ，最终卡死你的网页

 


 


 


 


 


 


 


 


 


 


 
。 其原因与JS引擎线程有关（需深入研究JS引擎线程）


 


 


 


 


 


 


 


 


 


 


 ，但是setTimeout是自带清除定时器的 
 
 
 
 
 
 
 
 
 
 
。 我没有出现页面卡死的情况所以就没加setTimeout 
   
   
   
   
   
   
   
   
   
   
  。

setInterval(() => { setTimeout(() => { this.queryChartTime() }, 0) }, 10000)

setInterval（）和setTimeout（）的区别：

一个是循环执行setInterval 
 
 
 
 
 
 
 
 
 
 
，另一个是定时执行setTimeout

1:setInterval 循环执行  
   
   
   
   
   
   
   
   
   
   
 ， 每隔一段时间执行一次

 

 

 

 

 

 

 

 

 

 

 ， 多次执行
 

 

 

 

 

 

 

 

 

 

 
。

2:setTimeout 到时间后执行
 

 

 

 

 

 

 

 

 

 

 
， 只执行一次
 

 

 

 

 

 

 

 

 

 

 
。

在beforeDestroy()生命周期内清除定时器

定时器需要在页面销毁的时候清除掉                      ，不然会一直存在！！