React.js中如何在滚动结束后调用函数而非滚动时触发

我完全懂你的需求——之前的代码会在滚动的每一刻都触发handleScroll，这显然不是你想要的。要实现滚动停止后才执行目标函数，我们可以用「防抖（Debounce）」的思路来解决，它能帮我们把频繁触发的滚动事件合并成一次执行。

核心思路 #

每次滚动触发时，我们先设置一个延迟计时器；如果在延迟期间又发生了滚动，就清除之前的计时器并重新设置。只有当用户停止滚动超过设定的延迟时间后，计时器才会到期，执行我们真正想运行的代码。

完整的类组件实现 #

class ScrollHandler extends React.Component {
  constructor(props) {
    super(props);
    // 用来保存防抖计时器的引用
    this.scrollDebounceTimer = null;
  }

  componentDidMount() {
    // 绑定滚动监听
    window.addEventListener('scroll', this.handleScroll, true);
  }

  componentWillUnmount() {
    // 移除滚动监听
    window.removeEventListener('scroll', this.handleScroll, true);
    // 组件卸载时清除计时器，避免内存泄漏
    if (this.scrollDebounceTimer) {
      clearTimeout(this.scrollDebounceTimer);
    }
  }

  handleScroll = () => {
    // 每次滚动时，先清除之前的计时器
    if (this.scrollDebounceTimer) {
      clearTimeout(this.scrollDebounceTimer);
    }
    // 设置新的计时器，这里设置300ms延迟（可根据需求调整）
    this.scrollDebounceTimer = setTimeout(() => {
      this.onScrollEnd();
    }, 300);
  };

  onScrollEnd = () => {
    // 这里写你要在滚动结束后执行的逻辑
    console.log("滚动终于停止了！");
    // 示例：获取当前滚动位置
    const currentScrollTop = window.pageYOffset || document.documentElement.scrollTop;
    console.log("当前滚动位置：", currentScrollTop);
    // 你可以在这里更新组件状态、调用接口等
  };

  render() {
    return (
      <div style={{ height: "2500px", padding: "20px" }}>
        向下滚动试试，看看控制台输出~
      </div>
    );
  }
}

关键细节说明 #

• 延迟时间调整：代码里的300ms是参考值，你可以根据实际需求修改——比如想要更灵敏就设成200ms，想要更稳定就设成500ms。
• 内存泄漏防范：在componentWillUnmount里一定要移除滚动监听并清除计时器，避免组件卸载后还保留不必要的事件监听和计时器。
• 函数组件适配：如果是用函数式组件开发，可以用useRef来保存计时器变量，逻辑和类组件完全一致，只是语法稍有不同。

内容的提问来源于stack exchange，提问作者Dayal Saini