vue项目中实现定时刷新页面(重新渲染数据实时更新)
需求:每隔一分钟自动刷新一下订单列表,同时发送请求,重新渲染数据,以到达实时更新。JS定时器有两种:setInterval(function(){}, milliseconds);//——会不停的调用函数setTimeout(function(){}, milliseconds);//只执行函数一次乍看之下,setInterval会符合我们的业务需求,然而也需要注意一些坑,单纯的使用setInte
·
需求:每隔一分钟自动刷新一下订单列表,同时发送请求,重新渲染数据,以到达实时更新。
JS定时器有两种:
setInterval(function(){}, milliseconds);//——会不停的调用函数
setTimeout(function(){}, milliseconds);//只执行函数一次
乍看之下,setInterval会符合我们的业务需求,然而也需要注意一些坑,单纯的使用setInterval会导致页面卡死!其原因与JS引擎线程有关, 用通俗话说就是setInterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,最终卡死你的网页。
但是setTimeout是自带清除定时器的,因此正确解决方法如下:
data(){
return {
timer:null, //定时器名称
}
},
mounted(){
this.queryInfo();
this.timer = setInterval(() => {
setTimeout(this.queryInfo, 0)
}, 1000*60)
},
methods: {
queryInfo(){
//do something
},
},
beforeDestroy(){
clearInterval(this.timer);
this.timer = null;
}
更多推荐
已为社区贡献7条内容
所有评论(0)