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

发布时间:2024-08-11 点击:70
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(视频)

微软Surface 3全新附件产品:键盘保护盖和手写笔
商标续展太贵,重新注册是个好选择吗?
阿里云企业采购云服务器实惠
该网页无法正常运作的响应时间过长
腾讯云服务器配置费用
bgp多线云服务器租用
百度云服务器管理控制台
帮忙看看为什么解析不生效呢