How can I prevent multiple calls from an event listener in a Vue Js Component?

Question

I am calling a specific function on the event listener like this.

mounted() {
    window.addEventListener("message", this.call);   },

methods: {
    call(e){
       if (e.data === "test"){
          this.call2()
       }
    }
    call2(){
       console.log("called call2")
    }
}

on the first try, call2 is called once. But on the second try, call2 is called twice and will display "called call2" twice on the console. And so on. for every try, it will just add to the number of times call2 is being called in a single action. Is there any way to prevent this?

zachzurn · Accepted Answer · 2021-05-18 04:48:08Z

9

Always remove event listeners in the beforeDestroy lifecycle hook to prevent leaking listeners.

//Add the event listener
mounted() {
    window.addEventListener("message", this.call);   
},

//Remove the event listener
beforeDestroy() {
    window.removeEventListener("message", this.call);   
},

Have a look at the Vue lifecycle for reference:

answered May 18, 2021 at 4:48

zachzurn

2,21115 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How can I prevent multiple calls from an event listener in a Vue Js Component?

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related