在 vue.js 项目中, 经常需要对数据实时更新 -- 每隔 xx 秒需要刷新一次接口 -- 即需要用到定时器相关原理. 这篇文章主要介绍了 vue 项目每 30 秒刷新 1 次接口的实现方法, 具有一定的参考价值, 对此有需要的朋友可以参考学习下. 如有不足之处, 欢迎批评指正.
在 vue.JS 项目中, 经常需要对数据实时更新 -- 每隔 xx 秒需要刷新一次接口 -- 即需要用到定时器相关原理
我们先看一看 2 种常用定时器:
setInterval(function(){}, milliseconds)-- 会不停的调用函数
setTimeout(function(){}, milliseconds)-- 只执行函数一次
setInterval 会符合我们的业务需求, 然而也需要注意一些坑, 单纯的使用 setInterval 会导致页面卡死! 其原因与 JS 引擎线程有关 (有兴趣的童鞋可自行研究相关资料), 用通俗话说就是 setInterval 不会清除定时器队列, 每重复执行 1 次都会导致定时器叠加, 最终卡死你的网页.
但是 setTimeout 是自带清除定时器的, 因此正确解决方法如下:
- Windows.setInterval(() => {
- setTimeout(fun, 0)
- }, 30000)// 欢迎加入前端全栈开发交流圈一起吹水聊天学习交流: 864305860
注意: setInterval 必须放在外层 (在内层会导致页面卡顿直到崩溃), 内层配合 setTimeout, 即可无限次调用我们的接口啦!
结语
感谢您的观看, 如有不足之处, 欢迎批评指正.
来源: http://www.qdfuns.com/article/51117/15a67319ddea5b043a466583d7e734c6.html