目录

1 在data中定义

2 在methods中定义

3 开始轮询

4 终止轮询

方法一: destroyed()

方法二:beforeRouteLeave(to, from, next) 推荐

所有代码


轮询:polling

1 在data中定义

     data() {
        return {
            polling: ''
        }
    },

2 在methods中定义

     methods: {
      getDateLoop(timeout = 15000) { // timeout可以写死,也可以动态
        console.log('查询'); // 执行语句
        this.polling = setInterval(() => {
          console.log('查询'); // 轮询中,执行语句
        }, timeout)
      },
    },

3 开始轮询

    created() {
      this.getDateLoop(); // 开始轮询
    },

在当前页面不停打印,说明轮询成功

4 终止轮询

方法一: destroyed()

这个方法,反复跳转后会失效(有点奇怪),所以转用方法二

失效原因:开发的网页是SPA-单页面应用,每次页面跳转,都是由路由机制管理,刷新的只有网页内容。(因为这个销毁过程失灵时不灵,所以博主猜测:)页面跳转的时候不一定会销毁这个组件所以这个方法失灵时不灵。

     destroyed() {
       clearInterval(this.polling) // 结束轮询
     },

跳转页面后,停止打印,说明轮询停止

方法二:beforeRouteLeave(to, from, next) 推荐

    beforeRouteLeave(to, from, next){  // 路由跳转前,清除轮询
        next();
        if (this.polling) {
          clearInterval(this.polling);
          this.polling = null;
        }
     },

所有代码

     data() {
        return {
            polling: ''
        }
    },
     methods: {
      getDateLoop(timeout = 15000) { // timeout可以写死,也可以动态
        console.log('查询'); // 执行语句
        this.polling = setInterval(() => {
          console.log('查询'); // 轮询中,执行语句
        }, timeout)
      },
    },
    created() {
      this.getDateLoop(); // 开始轮询
    },
    // destroyed() {
    //   clearInterval(this.polling) // 结束轮询
    // },
    beforeRouteLeave(to, from, next){  // 路由跳转前,清除轮询
        next();
        if (this.polling) {
          clearInterval(this.polling);
          this.polling = null;
        }
     },

Logo

前往低代码交流专区

更多推荐