vue项目每30秒刷新1次接口的实现方法


Posted in Javascript onDecember 04, 2018

在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次接口的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
新页面打开实际尺寸的图片
Aug 25 Javascript
js 页面刷新location.reload和location.replace的区别小结
Dec 24 Javascript
密码框显示提示文字jquery示例
Aug 29 Javascript
JavaScript实现点击按钮直接打印
Jan 06 Javascript
js实现选项卡内容切换以及折叠和展开效果【推荐】
Jan 08 Javascript
Jquery uploadify 多余的Get请求(404错误)的解决方法
Jan 26 Javascript
ES6字符串模板,剩余参数,默认参数功能与用法示例
Apr 06 Javascript
webpack公共组件引用路径简化小技巧
Jun 15 Javascript
ES6中Set和Map数据结构,Map与其它数据结构互相转换操作实例详解
Feb 28 Javascript
微信小程序事件对象中e.target和e.currentTarget的区别详解
May 08 Javascript
使用axios请求接口,几种content-type的区别详解
Oct 29 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 07 Javascript
详解webpack4之splitchunksPlugin代码包分拆
Dec 04 #Javascript
React Native中Mobx的使用方法详解
Dec 04 #Javascript
element ui table(表格)实现点击一行展开功能
Dec 04 #Javascript
elementUI中Table表格问题的解决方法
Dec 04 #Javascript
zepto.js 实时监听输入框的方法
Dec 04 #Javascript
vue 之 css module的使用方法
Dec 04 #Javascript
Vue源码解析之数组变异的实现
Dec 04 #Javascript
You might like
php 数组二分法查找函数代码
2010/02/16 PHP
php中eval函数的危害与正确禁用方法
2014/06/30 PHP
PHP http请求超时问题解决方案
2020/11/13 PHP
EasyUI的treegrid组件动态加载数据问题的解决办法
2011/12/11 Javascript
模拟jQuery中的ready方法及实现按需加载css,js实例代码
2013/09/27 Javascript
js select option对象小结
2013/12/20 Javascript
用js将内容复制到剪贴板兼容浏览器
2014/03/18 Javascript
分享一则javascript 调试技巧
2015/01/02 Javascript
javascript判断复选框是否选中的方法
2015/10/16 Javascript
基于javascript实现图片左右切换效果
2016/01/25 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
javascript表单处理具体实现代码(表单、链接、按钮)
2016/05/07 Javascript
Three.js基础部分学习
2017/01/08 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
javascript基本数据类型和转换
2017/03/17 Javascript
JavaScript 获取元素在父节点中的下标(推荐)
2017/06/28 Javascript
js 实现在2d平面上画8的方法
2018/10/10 Javascript
async/await优雅的错误处理方法总结
2019/01/30 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
解决vue数据不实时更新的问题(数据更改了,但数据不实时更新)
2020/10/27 Javascript
Python模块学习 re 正则表达式
2011/05/19 Python
wxpython 最小化到托盘与欢迎图片的实现方法
2014/06/09 Python
使用Python发送各种形式的邮件的方法汇总
2015/11/09 Python
python的sorted用法详解
2019/06/25 Python
python实现银行账户系统
2021/02/22 Python
一套C++笔试题面试题
2012/06/06 面试题
创建索引时需要注意的事项
2013/05/13 面试题
使用Vue.js和MJML创建响应式电子邮件
2021/03/23 Vue.js
护理专业学生的求职信范文
2013/12/11 职场文书
《晏子使楚》教学反思
2014/02/08 职场文书
幼儿园消防演练方案
2014/02/13 职场文书
小学清明节活动方案
2014/03/08 职场文书
企业消防安全责任书
2014/07/23 职场文书
基于nginx实现上游服务器动态自动上下线无需reload的实现方法
2021/03/31 Servers
python内置进制转换函数的操作
2021/06/02 Python
Python实现抖音热搜定时爬取功能
2022/03/16 Python