vue项目使用定时器每隔几秒请求一次接口
vue.js项目,每隔5秒请求一次接口,接口有返回则停止请求,没有返回继续请求。先看两种定时器// 每隔设定时间调用一次函数setInterval(function(){}, milliseconds)//设定时间后只执行函数一次setTimeout(function(){}, milliseconds)注意:单纯的使用setInterval会导致页面卡死!由于setInt...
·
vue.js项目,每隔5秒请求一次接口,接口有返回则停止请求,没有返回继续请求。
先看两种定时器
// 每隔设定时间调用一次函数
setInterval(function(){}, milliseconds)
//设定时间后只执行函数一次
setTimeout(function(){}, milliseconds)
注意:单纯的使用setInterval会导致页面卡死!
由于setInterval不会清除定时器队列,每重复执行1次都会导致定时器叠加,最终卡死网页。 但是setTimeout是自带清除定时器的,因此正确解决方法如下:
window.setInterval(() => {
setTimeout(fun, 0)
}, 30000)
setInterval必须放在外层,内层配合setTimeout,便可以无限次调用接口
回到要解决的问题,如何在得到数据后停止定时器?
// 如methods里定义的点击方法
methods: {
click () {
let timer = setInterval(() => {
this.fun(timer)
}, 5000)
},
fun (timer) {
setTimeout(()=>{
// 这里ajax 请求的代码片段和判断是否停止定时器
..........
// 如需要停止定时器,只需加入以下:
clearInterval(timer)
}, 0)
}
}
如果增加在请求n次后还是没有结果的话,就停止请求,只需在data里面定义一个计数字段 i 默认为 0,setTimeout内请求时执行 ++i ,后续判断即可
更多推荐
已为社区贡献1条内容
所有评论(0)