Código:-
<template> // html </template> <script> import _ from "lodash"; data() { return { renderComponent: false, }; }, watch: { // when this property is true, want to stop calling scroll event with this.onScroll method renderComponent(val) { if(val === true) { console.log("////////I am removing you"); window.removeEventListener('scroll', this.onScroll); } } }, methods: { onScroll() { console.log("I am called////////"); let similarTickerHeading = this.$refs.similarTicker; if(similarTickerHeading) { let margin = similarTickerHeading.getBoundingClientRect().top; let innerHeigth = window.innerHeight; console.log("Window Screen", innerHeigth); console.log("Component located", margin); // when this condition is true, I want to stop listening for the scroll event with this (onScroll method) if(margin - innerHeigth < 850) { console.log("I should start loading the actual component"); this.renderComponent = true; this.$vs.loading.close("#loader-example > .con-vs-loading"); // removing eventListener for scrolling with the onScroll Method window.removeEventListener('scroll', this.onScroll); } } } }, mounted() { this.renderComponent = false; this.$vs.loading({ container: "#loader-example", type: "point", scale: 0.8, }); this.$nextTick(function() { window.addEventListener('scroll', _.throttle(this.onScroll,250)); this.onScroll(); }) }, beforeDestroy() { window.removeEventListener('scroll', this.onScroll); }, </script> En el código anterior, quiero dejar de escuchar el evento de desplazamiento con el método onScroll cuando mi bloque if en el método onScroll se vuelve verdadero. Pero, aún así, se llama al método onScroll cada vez que me desplazo aunque intenté eliminar eventListener . Incluso creé un observador para eliminar eventListener , pero el método sigue siendo llamado en el desplazamiento.
¿Cómo puedo eliminar el scroll eventListener con el método onScroll ?
ACTUALIZACIÓN : si elimino la limitación y _.throttle , el evento de desplazamiento se elimina. Debido al uso de _.throttle , no puedo eliminar el detector de eventos de desplazamiento.
La referencia de función que se pasa a window.addEventListener() debe ser la misma referencia que se pasa a window.removeEventListener() . En su caso, hay dos referencias diferentes porque ha envuelto una de ellas con _.throttle() .
Guarde en caché la referencia de la función pasada a addEventListener() para que pueda usarse más tarde para removeEventListener() :
export default { mounted() { 👇 this._scrollHandler = _.throttle(this.onScroll, 250) this.$nextTick(() => { 👇 window.addEventListener('scroll', this._scrollHandler); this.onScroll(); }) }, beforeDestroy() { 👇 window.removeEventListener('scroll', this._scrollHandler); }, }