Vue项目 定时器(setInterval)实现轮询接口（定时刷新页面，重新渲染数据实时更新）

需求:

每隔1s自动刷新一下当前页面，同时发送请求，重新渲染数据，以到达实时更新。

js有两种定时器

setInterval(function(){
    
    }, milliseconds)——会不停的调用函数

setTimeout(function(){
    
    }, milliseconds)——只执行函数一次

轮询单独使用setInterval可能导致页面卡死

• 因为setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加
• 但是setTimeout是自带清除定时器的队列。所以可以把二者结合起来使用。

1. setTimeout()：延时任务。在指定的毫秒数后调用函数或计算表达式,
2. setInterval()：定时任务。在每隔指定的毫秒数循环调用函数或表达式，直到clearInterval把它清除。
3. setTimeout()只执行一次，而setInterval可以多次调用。

setInterval会符合我们的业务需求，然而也需要注意一些坑，单纯的使用setInterval会导致页面卡死！其原因与JS引擎线程有关, 用通俗话说就是setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死你的网页。

但是setTimeout是自带清除定时器的，因此正确解决方法如下：

data(){
    
    
  return {
    
    
       timer:null, //定时器名称
    }
},
mounted(){
    
    
   this.getList();
   this.timer = setInterval(() => {
    
    
         setTimeout(() => {
    
    
		   	this.getList() //调用接口的方法
		 }, 0)
   }, 1000)
},
methods: {
    
    
   getList(){
    
    
    //do something
   },
},
beforeDestroy(){
    
    
   clearInterval(this.timer);        
   this.timer = null;
}

说明:

1.在执行定时器前先执行一次获取接口数据的操作函数, 否则接口会1分钟后才调用

2.为了避免退出当前页面后,在其他页面也继续调用接口,退出前需要清除定时器.

清除定时器优化方案

上面的清除定时器方案有两点不好:

1. 它需要在这个组件实例中保存这个 timer，如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题，但是它可以被视为杂物。
2. 我们的建立代码独立于我们的清理代码，这使得我们比较难于程序化的清理我们建立的所有东西

优化方案:

通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器.

const timer = setInterval(() =>{
    
                        
    // 某些定时器操作                
}, 500);            
// 通过$once来监听定时器，在beforeDestroy钩子可以被清除。
this.$once('hook:beforeDestroy', () => {
    
                
    clearInterval(timer);                                    
})