window.removeEventListener with a named function isn't working
Every time you bind a function, you get a new function back. You are removing a different listener from the one you added initially. Store the result of function.bind
and use that in both places
this.boundInfiniteScroll = this.infiniteScroll.bind(this);
...
} else {
window.removeEventListener('scroll', this.boundInfiniteScroll);
}
}
window.addEventListener('scroll', this.boundInfiniteScroll);
To removeEventListener
you have to pass the same reference to function as you pass to addEventListener
., .bind
returns the new reference because it is the new function
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
so in your example, you have two different references that's why removeEventListener
does not work
let flag = true;
const infiniteScrollFn = infiniteScroll.bind(this);
function infiniteScroll() {
let enterpriseWrap = $('.enterprise-blocks');
let contentHeight = enterpriseWrap.offsetHeight;
let yOffset = window.pageYOffset;
let y = yOffset + window.innerHeight;
if (this.props.hasMore) {
if (y >= contentHeight && flag) {
flag = false;
this.props.loadMoreVendors(function() {
flag = true;
});
}
} else {
window.removeEventListener('scroll', infiniteScrollFn);
}
}
window.addEventListener('scroll', infiniteScrollFn);
Example