背景描述：
我使用的是vue+element 开发系统，需要一段时间监测数据的变化
解决方案：
本来想使用websock效果更佳，想到仅仅单页面使用就是用后端缓存数据前端定时请求的方法。使用定时器和延时器的方案
首先介绍下定时器和延时器

setInterval(function(){}, milliseconds)——会不停的调用函数
setTimeout(function(){}, milliseconds)——只执行函数一次

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

解决方案如下：

data(){
  return {
       timer:null, //定时器名称
    }
},
mounted(){
	this.queryInfo()
   if (this.timer) {
		    clearInterval(this.timer)
		} else {
		    this.timer = setInterval(() => {
       			setTimeout(this. queryInfo(), 0)
       			 console.log("刷新" + new Date());
		    }, 1000*1000)
		}
},
methods: {
   queryInfo(){
    //数据请求
   },
},
beforeDestroy(){
   clearInterval(this.timer);        
   this.timer = null;
}

当然也可以有另一种方法

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