vue项目使用定时器每隔几秒请求一次接口

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

来源：CSDN

作者：F小滚石R

链接：https://blog.csdn.net/qq_39840470/article/details/104635153