vue项目实现每隔1分钟刷新当前页面(附:清除定时器优化方案) |
您所在的位置:网站首页 › ep方案间隔几天更新一次 › vue项目实现每隔1分钟刷新当前页面(附:清除定时器优化方案) |
有个需求是: 需要实时获取接口数据,每隔1分钟获取一次, 我们可以通过定时刷新页面来达到效果. 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.为了避免退出当前页面后,在其他页面也继续调用接口,退出前需要清除定时器. 清除定时器优化方案 上面的清除定时器方案有两点不好: 它需要在这个组件实例中保存这个 timer,如果可以的话最好只有生命周期钩子可以访问到它。这并不算严重的问题,但是它可以被视为杂物。我们的建立代码独立于我们的清理代码,这使得我们比较难于程序化的清理我们建立的所有东西优化方案: 通过$once这个事件侦听器器在定义完定时器之后的位置来清除定时器. const timer = setInterval(() =>{ // 某些定时器操作 }, 500); // 通过$once来监听定时器,在beforeDestroy钩子可以被清除。 this.$once('hook:beforeDestroy', () => { clearInterval(timer); })vue官网: 处理边界情况
|
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |