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 相关文章推荐
JS 有趣的eval优化输入验证实例代码
Sep 22 Javascript
jQuery原型属性和原型方法详解
Jul 07 Javascript
基于Bootstrap重置输入框内容按钮插件
May 12 Javascript
JS使用单链表统计英语单词出现次数
Jun 16 Javascript
Node.js开启Https的实践详解
Oct 25 Javascript
JS实现的相册图片左右滚动完整实例
Nov 23 Javascript
在vue-cli项目中使用bootstrap的方法示例
Apr 21 Javascript
vue-auto-focus: 控制自动聚焦行为的 vue 指令方法
Aug 25 Javascript
使用angularjs.foreach时return的问题解决
Sep 30 Javascript
微信小程序实现抖音播放效果的实例代码
Apr 11 Javascript
在nuxt中使用路由重定向的实例
Nov 06 Javascript
js制作提示框插件
Dec 24 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
解析thinkphp的左右值无限分类
2013/06/20 PHP
php解析html类库simple_html_dom(详细介绍)
2013/07/05 PHP
PHP生成压缩文件实例
2015/02/07 PHP
php动态函数调用方法
2015/05/21 PHP
PHP SOCKET编程详解
2015/05/22 PHP
php使用number_format函数截取小数的方法分析
2016/05/27 PHP
利用js对象弹出一个层
2008/03/26 Javascript
小试JQuery的AutoComplete插件
2011/05/04 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
2014/07/17 Javascript
Redis基本知识、安装、部署、配置笔记
2015/03/05 Javascript
JavaScript SHA512&SHA256加密算法详解
2015/08/11 Javascript
video.js使用改变ui过程
2017/03/05 Javascript
详解JavaScript中typeof与instanceof用法
2018/10/24 Javascript
mocha的时序规则讲解
2019/02/16 Javascript
webpack proxy 使用(代理的使用)
2020/01/10 Javascript
webpack+vue-cil 中proxyTable配置接口地址代理操作
2020/07/18 Javascript
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
python计算最大优先级队列实例
2013/12/18 Python
对python中的logger模块全面讲解
2018/04/28 Python
python单例模式原理与创建方法实例分析
2019/10/26 Python
python DataFrame转dict字典过程详解
2019/12/26 Python
Python如何避免文件同名产生覆盖
2020/06/09 Python
快速解释如何使用pandas的inplace参数的使用
2020/07/23 Python
python破解同事的压缩包密码
2020/10/14 Python
Python实现LR1文法的完整实例代码
2020/10/25 Python
matplotlib运行时配置(Runtime Configuration,rc)参数rcParams解析
2021/01/05 Python
让IE可以变相支持CSS3选择器
2010/01/21 HTML / CSS
纯css3(无图片/js)制作的几个社交媒体网站的图标
2013/03/21 HTML / CSS
用CSS3的box-reflect设置文字倒影效果的方法讲解
2016/03/07 HTML / CSS
智能旅行箱:Horizn Studios
2018/04/30 全球购物
结构工程研究生求职信
2013/10/13 职场文书
检查机关领导群众路线教育实践活动个人整改措施
2014/10/28 职场文书
红色经典电影观后感
2015/06/18 职场文书
学校教学管理制度
2015/08/06 职场文书
2016年大学生就业指导课心得体会
2015/10/09 职场文书
Python基础 括号()[]{}的详解
2021/11/07 Python