javascript - 离开组件 vuejs 2 后自定义事件仍在触发

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

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

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

编辑:intervalId 不需要 react 。