vue项目每30秒刷新1次接口的实现方法
更新时间：2018年12月04日 11:20:04 作者：前端小讴
在vue.js项目中，经常需要对数据实时更新——每隔xx秒需要刷新一次接口——即需要用到定时器相关原理。这篇文章主要介绍了vue项目每30秒刷新1次接口的实现方法,需要的朋友可以参考下
在vue.js项目中，经常需要对数据实时更新——每隔xx秒需要刷新一次接口——即需要用到定时器相关原理
我们先看一看2种常用定时器：
setInterval(function(){}, milliseconds)——会不停的调用函数
setTimeout(function(){}, milliseconds)——只执行函数一次
乍看之下，setInterval会符合我们的业务需求，然而也需要注意一些坑，单纯的使用setInterval会导致页面卡死！其原因与JS引擎线程有关（有兴趣的童鞋可自行研究相关资料），用通俗话说就是setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死你的网页。
但是setTimeout是自带清除定时器的，因此正确解决方法如下：
window.setInterval(() => {
setTimeout(fun, 0)
}, 30000)
注意：setInterval必须放在外层（在内层会导致页面卡顿直到崩溃），内层配合setTimeout，即可无限次调用我们的接口啦！
总结
以上所述是小编给大家介绍的vue项目每30秒刷新1次接口的实现方法，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！
相关文章
用v-html解决Vue.js渲染中html标签不被解析的问题
这篇文章主要给大家介绍了如何利用v-html解决Vue.js渲染过程中html标签不能被解析，html标签显示为字符串的问题，文中通过图文介绍的很详细，有需要的朋友们可以参考借鉴，下面来一起看看吧。2016-12-12
这篇文章主要为大家详细介绍了Vue图片放大镜组件的封装，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-08-08
这篇文章主要介绍了Vue中的ESLint配置方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-03-03
高亮显示是我们日常开发中经常会遇到的需求,下面这篇文章主要给大家介绍了关于如何使用Vue3实现文章内容中多个"关键词"标记高亮显示的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下2022-11-11
这篇文章主要介绍了vue动态生成新表单并且添加验证校验规则方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
解决vue net :ERR_CONNECTION_REFUSED报错问题
这篇文章主要介绍了解决vue net :ERR_CONNECTION_REFUSED报错问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-08-08
这篇文章主要为大家详细介绍了vue-music关于Player播放器组件的相关资料，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
VUE中setTimeout和setInterval自动销毁案例
这篇文章主要介绍了VUE中setTimeout和setInterval自动销毁案例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
element自定义 多文件上传 触发多次on-change问题
这篇文章主要介绍了element自定义 多文件上传 触发多次on-change问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
今天小编就为大家分享一篇vue 2.1.3 实时显示当前时间,每秒更新的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论