×
新网 > 建站推广 > 正文

vue.js怎么让网页定时刷新

  • 作者:zccc
  • 来源:网络
  • 2020-11-09 15:06:25

vue.js让网页定时刷新的方法:1、执行函数【setTimeout(function(){}, milliseconds)】;2、在执行定时器前先执行一次获取接口数据的操作函数。【相关文章推荐:vue.js】vue.js让

vue.js让网页定时刷新的方法:1、执行函数【setTimeout(function(){}, milliseconds)】;2、在执行定时器前先执行一次获取接口数据的操作函数。

【相关文章推荐:vue.js】

vue.js让网页定时刷新的方法:

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);                                    
})

相关免费学习推荐:javascript(视频)

  • 相关专题

免责声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,也不承认相关法律责任。如果您发现本社区中有涉嫌抄袭的内容,请发送邮件至:operations@xinnet.com进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。

免费咨询获取折扣

Loading