在Vue项目中，为实现每分钟自动刷新页面并获取新数据，通常使用setInterval和setTimeout结合的方式。由于setInterval可能导致页面卡死，故采用setTimeout配合setInterval来避免定时器叠加。在组件的mounted钩子中启动定时器，queryInfo方法获取接口数据。在beforeDestroy钩子中清除定时器以防止内存泄漏。此外，还可以通过$once事件监听器优化清除定时器的逻辑，确保在组件销毁时准确清除。
需求: 每隔一分钟自动刷新一下当前页面，同时发送请求，重新渲染数据，以到达实时更新。
开始：
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;
}
说明: 1.在执行定时器前先执行一次获取接口数据的操作函数, 否则接口会1分钟后才调用
2.为了避免退出当前页面后,在其他页面也继续调用接口,退出前需要清除定时器.
清除定时器优化方案
上面的清除定时器方案有两点不好:
它
最低0.47元/天 解锁文章
扫一扫
1346
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
