删除 addEventListener 调用的函数中的 eventHandler

Question

我在页面中添加了无限滚动功能。它在 componentDidMount 生命周期钩子中附加了一个事件侦听器，当没有“nextlink”时，我想在事件侦听器调用的操作中删除它。我设置了一个可以正常工作的 console.log() 消息，但我不确定为什么 window.removeEventListener() 函数不起作用。任何帮助将不胜感激。

负责添加/删除 eventListener 的一段代码。

componentDidMount() {
    this._isMounted = true;
    this.props.onFetchTeams();

    this.scrollListener = window.addEventListener("scroll", e => {
        this.handleScroll(e);
    });
}

handleScroll = () => {
    const hasMoreLink = this.props.teams["@odata.nextLink"];

    if (hasMoreLink == "") {
        console.log("remove event handler");
        window.removeEventListener("scroll", this.handleScroll);
    }

    // If there is at least a team and is currently not loading, proceed to load more.
    if (this.state.loadingMore === false && this.props.teams["value"]) {
        // get the last teamcard in the page
        const lastTeam = document.querySelector(
            ".team-card-wrapper:last-of-type"
        );

        // get the height of the current team, and get the height of the current position on screen.
        const lastTeamOffset = lastTeam.offsetTop + lastTeam.clientHeight;
        const pageOffset = window.pageYOffset + window.innerHeight;

        // the range that teams will load earlier than the bottom of the page.
        const bottomOffset = 30;

        if (pageOffset > lastTeamOffset - bottomOffset) {
            this.setState({ loadingMore: true });
            this.props.onFetchMoreTeams(hasMoreLink);
        }
    }
};

Answer 1

removeListener 需要与 addListener 时使用的函数相同的引用。把代码改成addEventListener之类的

this.scrollListener = window.addEventListener("scroll", this.handleScroll);

Answer 2

这是因为赋予 addEventListener 的函数和赋予 removeEventListener 的函数应该完全相同，但在您的情况下，您正在为 addEventListener 创建一个新的箭头函数。所以我认为你应该尝试这样的事情：

this.scrollListener = window.addEventListener("scroll", this.handleScroll)
...
handleScroll = (e) => {
    ...
    if(noMoreScroll) window.removeEventListener("scroll", this.handleScroll)
    ...
}

希望对你有帮助:)

Answer 3

考虑修改添加滚动事件处理程序的方式，直接传递handleScroll 函数：

componentDidMount() {
    this._isMounted = true;
    this.props.onFetchTeams();

    /* 
    With the this.handleScroll bound to this class instance, we can now pass the method 
    directly to addEventListener as shown
    */
    this.scrollListener = window.addEventListener("scroll", this.handleScroll);
}

handleScroll = () => {
    const hasMoreLink = this.props.teams["@odata.nextLink"];

    if (hasMoreLink == "") {
        console.log("remove event handler");
        /* This will now work as expected */
        window.removeEventListener("scroll", this.handleScroll);
    }

    /* Rest of your code remains unchanged .. */
}