在vue.js项目中,我们经常会需要实现轮询,即对数据实时更新的这种需求:每隔xx秒需要刷新一次接口刷新数据。如:每隔30秒请求一次数据
这时候我们就需要用到定时器相关的原理。
我们可以先看看2种常用定时器:
setinterval(
function(){}, seconds)——隔seconds调用一次函数
settimeout(
function
(){}, seconds)——只执行函数一次
这么看的话,setinterval会符合我们的业务需求。然而这里也会有些问题:
如果你单纯的使用setinterval的话,会导致页面卡死!
其原因与js引擎线程有关,简单来说就是setinterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,最终卡死网页。
但是settimeout是自带清除定时器的,因此正确解决方法如下:
window.
setInterval(() => {
setTimeout
(fun, 0)
}, 30000)
// 这里的30000为多少秒刷新的时间
注意:setinterval必须放在外层(在内层会导致页面卡顿直到崩溃),内层配合settimeout(主要是setTimeout是自带清除定时器),即可无限次调用我们的接口啦!