Question

我正在使用vue.js开展spa项目。在一个组件中，我会在一段时间后发送ajax请求。我使用vue-router进行导航。当我离开路线并进入另一个组件时，ajax请求仍在执行。如何防止/破坏事件执行？这是我的代码示例：

    export default {
        data() {
            return {
            };
        },
        methods: {
            onLoad() {
                setInterval(function(){
                    //sending ajax request
                }, 5000);
            },
        },
        mounted() {
            this.onLoad();
        },
    }

Answer 1

您需要在Vue实例中保存间隔ID，以便稍后通过调用clearInterval将其删除。以下是如何实现这一目标：

export default {
  data() {
    return {
        intervalId: null
    }
  },
  methods: {
    onLoad() {
      this.intervalId = setInterval(function() {
        //sending ajax request
      }, 5000)
    }
  },
  mounted() {
    this.onLoad()
  },
  beforeDestroy() {
    clearInterval(this.intervalId)
  }
}

离开组件vuejs 2后自定义事件仍然触发

1 个答案: