vue项目如何做到每30秒刷新1次接口？

honmaple 发布于2019-08-23 13:52 / 2929人阅读

摘要：但是是自带清除定时器的，因此正确解决方法如下注意必须放在外层在内层会导致页面卡顿直到崩溃，内层配合，即可无限次调用我们的接口啦

欢迎关注前端小讴的github，阅读更多原创技术文章

在vue.js项目中，经常需要对数据实时更新——每隔xx秒需要刷新一次接口——即需要用到定时器相关原理

我们先看一看2种常用定时器：

setInterval(function(){}, milliseconds)——会不停的调用函数

setTimeout(function(){}, milliseconds)——只执行函数一次

乍看之下，setInterval会符合我们的业务需求，然而也需要注意一些坑，单纯的使用setInterval会导致页面卡死！其原因与JS引擎线程有关（有兴趣的童鞋可自行研究相关资料），用通俗话说就是setInterval不会清除定时器队列，每重复执行1次都会导致定时器叠加，最终卡死你的网页。

但是setTimeout是自带清除定时器的，因此正确解决方法如下：

window.setInterval(() => {
    setTimeout(fun, 0)
}, 30000)

注意：setInterval必须放在外层（在内层会导致页面卡顿直到崩溃），内层配合setTimeout，即可无限次调用我们的接口啦！

GPU云服务器云服务器 js每间隔1秒每隔5秒请求一次数据云服务器开机要开30秒 html 3秒刷新

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/99695.html

加推Weex实践之路（上）

摘要：我们参考小程序的设计思路进行了优化升级，为每一个需要特有化配置的页面添加一个格式的配置文件，配置文件包括导航栏的配置页面级别的配置跳转的配置等，将配置工程化标准化。设置导航栏按钮包含按钮样式的数组通过完成按钮事件的回调。一、背景1.为什么是Weex在公司快速发展的大环境下，App的更新迭代高速、高频，技术团队平均两周便可诞生一款中型App，但App团队只有6个人（iOS 、Android各3...

shuibo 2019-05-22 19:43 评论0 收藏0
页面性能优化实践总结

摘要：页面性能优化学而不思则惘，思而不学则殆前几天接到一个页面效果优化的任务，边做边查阅了一些关于页面性能的资料。可能只需要在中使用这类属性，即可开启硬件加速硬件加速真的那么好吗从本人在移动端开发的实践来看，硬件加速是比较坑的。页面性能优化学而不思则惘，思而不学则殆前几天接到一个页面效果优化的任务，边做边查阅了一些关于页面性能的资料。做完任务之后，抽空写了一篇总结，梳理一下思路，加深自...

LiangJ 2019-08-29 11:01 评论0 收藏0
页面性能优化实践总结

摘要：页面性能优化学而不思则惘，思而不学则殆前几天接到一个页面效果优化的任务，边做边查阅了一些关于页面性能的资料。可能只需要在中使用这类属性，即可开启硬件加速硬件加速真的那么好吗从本人在移动端开发的实践来看，硬件加速是比较坑的。页面性能优化学而不思则惘，思而不学则殆前几天接到一个页面效果优化的任务，边做边查阅了一些关于页面性能的资料。做完任务之后，抽空写了一篇总结，梳理一下思路，加深自...

caoym 2019-08-19 18:48 评论0 收藏0
一次网站的性能优化之路 -- 天下武功，唯快不破

摘要：百度搜索资源平台有闪电算法的支持，为了能够保障用户体验，给予优秀站点更多面向用户的机会，闪电算法在年月初上线。下栏是每一个指标的细化性能评估。最后优化之路漫漫，永无止境，天下武功，唯快不破。 showImg(https://segmentfault.com/img/remote/1460000018537491); 首屏作为直面用户的第一屏，其重要性不言而喻，如何加快加载的速度是非常重...

mudiyouyou 2019-08-23 16:01 评论0 收藏0