美文网首页vuevueJs基础知识
vue实现每隔几秒请求一次接口(轮询)

vue实现每隔几秒请求一次接口(轮询)

作者: 上海_前端_求内推 | 来源:发表于2022-03-02 10:59 被阅读0次

    单纯使用setInterval会使页面卡死,setTimeout自带清除缓存,组合使用实现轮询可解决浏览器崩溃

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

    完整代码

    <template>
     <div></div>
    </template>
     
    <script>
    export default {
     data() {
      return {
       num: 0,
     timer: null,
      };
     },
    destroyed() {
    //离开页面是销毁
        clearInterval(this.timer);
        this.timer = null;
      },
     created() {
      // 实现轮询
     this.timer = window.setInterval(() => {
            setTimeout(this.getProjectList(), 0);
          }, 3000);
     },
     methods: {
    stop() {
          clearInterval(this.timer);
          this.timer = null;
        },
      // 请求是否有新消息
     getProjectList() {
       console.log("请求" + this.num++ + "次");
    if(this.num==8){
    this.stop() 
    }
      }
     }
    };
    </script>
     
    <style scoped>
    </style>
    

    相关文章

      网友评论

        本文标题:vue实现每隔几秒请求一次接口(轮询)

        本文链接:https://www.haomeiwen.com/subject/knpsrrtx.html