javascript - 具有命名函数的 window.removeEventListener 不起作用

Question

我正在使用 React，下面是我用来实现无限滚动功能的代码。

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

我实际上想在加载所有项目后取消绑定(bind)滚动事件，但 removeEventListener 不起作用。我做错了什么吗？

Answer 1

每次你绑定(bind)一个函数，你都会得到一个新的函数。您正在从最初添加的监听器中删除一个不同的监听器。存储 function.bind 的结果并在两个地方使用它

this.boundInfiniteScroll = this.infiniteScroll.bind(this);
...

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

window.addEventListener('scroll', this.boundInfiniteScroll);