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 ,后续判断即可

Logo

基于 Vue 的企业级 UI 组件库和中后台系统解决方案,为数万开发者服务。

更多推荐