Event listener in window does not delete

Question

I need to remove the set of event listeners in the window, but it does not work, the listener continues to scroll. I tried to install a listener with and without a lodash throttle, but that doesn't make any difference. Here is my code:

setupListener() { window.addEventListener('resize', _.throttle(this.handler.bind(this), 750)); window.addEventListener('scroll', _.throttle(this.handler.bind(this), 750)); } removeListener() { window.removeEventListener('resize', _.throttle(this.handler.bind(this), 750)); window.removeEventListener('scroll', _.throttle(this.handler.bind(this), 750)); window.addEventListener('load', this.handler.bind(this), false); } static isElementInViewport (el) { let rect = el.getBoundingClientRect(); return ( rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && rect.right <= (window.innerWidth || document.documentElement.clientWidth) ); } handler() { if (this.options.url === undefined) {throw new Error('no url specified');} if (InfiniteScroll.isElementInViewport(this.elementToWatch)) { this.removeListener(); this[this.options.transport](); } } 

I also tried to promise removal:

 handler() { if (this.options.url === undefined) {throw new Error('no url specified');} if (InfiniteScroll.isElementInViewport(this.elementToWatch)) { Promise.resolve(this.removeListener()) .then(val => { this[this.options.transport](); }); } } 

which also has not changed.

Later in the code I want to reassign listeners:

 handleResponse(data) { console.log('handleResponse' + data); Promise.resolve(this.addElementsToDOM(data)) .delay(1000) .then(() => { this.page++; this.elementToWatch = document.getElementById(this.element).rows[document.getElementById(this.element).rows.length - this.options.loadTiming]; //this.setupListener(); }); } 

I recorded every step and can not find the reason for this. Can anybody help?

Sidenote: is there a better way to handle scroll events than to remove and add listeners all the time?

Answer 1

The fact is that when you add an event listener, the browser saves the function link as its "key", which you pass as a parameter. Therefore, when you want to delete it, you must send this link.

There are two ways to solve your problem. The first is to create named functions:

 setupListener() { this.listener = function() { _.throttle(this.handler.bind(this), 750); }.bind(this); window.addEventListener('resize', this.listener); window.addEventListener('scroll', this.listener); } removeListener() { window.removeEventListener('resize', this.listener); window.removeEventListener('scroll', this.listener); window.addEventListener('load', this.handler.bind(this), false); } 

Another, overrides the Window method addEventListener , but I do not suggest you do this.