window.removeEventListener with a named function isn't working

Question

I am using React and below is the code I am using to implement the infinite scroll feature.

componentDidMount() {
    // Flag to check if the content has loaded.
    let flag = true;

    function infiniteScroll() {
      let enterpriseWrap = $('.enterprise-blocks');
      let contentHeight = enterpriseWrap.offsetHeight;
      let yOffset = window.pageYOffset;
      let y = yOffset + window.innerHeight;

      console.log('hey');

      if(this.props.hasMore) {

        if(y >= contentHeight && flag) {
          flag = false;

          this.props.loadMoreVendors(function() {
            flag = true;
          });

        }

      } else {
        window.removeEventListener('scroll', infiniteScroll.bind(this));
      }
    }

    window.addEventListener('scroll', infiniteScroll.bind(this));
  }

I actually want to unbind the scroll event once all the items are loaded but removeEventListener is not working. Am I doing something wrong?

Unparliamentary

Answer 1

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);

Brahmani

Awesome. Thanks a lot. – Unparliamentary

Answer 2

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

Aureolin