vue项目每30秒刷新1次接口的实现方法
2019-01-29 12:43
746 查看
在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次接口的实现方法,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!
您可能感兴趣的文章:
相关文章推荐
- webpack+vue-cil 配置接口地址代理以及将项目打包到子目录的方法
- vue-cli项目开发/生产环境代理实现跨域请求+webpack配置开发/生产环境的接口地址
- vue项目tween方法实现返回顶部的示例代码
- vue项目的webpack设置请求模拟数据的接口方法
- vue.js中实现微信公众号中支付宝支付接口调用方法总结
- js 调用后台方法 ICallbackEventHandler 接口实现局部刷新实例 ClientScript的GetCallbackEventReference方法实现局部刷新
- 在vue-cli搭建的项目中增加后台mock接口的方法
- 利用ICallbackEventHandler接口实现无刷新的方法(2)
- 利用ICallbackEventHandler接口实现无刷新的方法(3)--示例
- VUE简单的定时器实时刷新的实现方法
- vue中接口域名配置为全局变量的实现方法
- vue2.0结合DataTable插件实现表格动态刷新的方法详解
- vue.js实现刷新当前页面的方法教程
- vue 项目如何引入微信sdk接口的方法
- 如何在Vue项目中使用Mockjs,模拟接口返回的数据,实现前后端分离独立开发
- 关于Vue项目路由栏去除“#”的处理方法及其刷新页面时出现404问题
- vue项目如何刷新当前页面的方法
- vue项目刷新当前页面的三种方法
- Vue+axios实现统一接口管理的方法
- vue-cli创建的项目,配置多页面的实现方法