window.removeEventListener with a named function isn't working window.removeEventListener with a named function isn't working reactjs reactjs

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