custom event still firing after leaving the components vuejs 2

Question

I'm working on a spa project using vue.js. In one component i'm sending ajax request after a while. I"m using vue-router to navigate. when i leaving the route and entering to another component, the ajax request still executing. How do i prevent/destroy the event executing? Here is my code example:

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

Answer 1

You need to save the interval ID in your Vue instance so that you can remove it later by calling clearInterval. Here is how you can achieve that:

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

EDIT: intervalId doesn't need to be reactive.