无限滚动时多次触发请求该怎么解决？

Good“悦洋提问于 2026-02-11 08:48:26 阅读 22

交互

我用window.scroll监听做无限滚动，设置的防抖函数也没问题，但滚动到底部时还是会触发多次请求。比如快速滚动时甚至会连续请求三次，怎么排查这个问题？

我的逻辑是监听scroll事件，当scrollTop + clientHeight >= documentHeight时调用fetchData：


const handleScroll = debounce(() => {
  const { scrollTop, clientHeight } = document.documentElement;
  const documentHeight = document.body.scrollHeight;
  if (scrollTop + clientHeight >= documentHeight - 200) {
    fetchData(); // 这里会多次调用
  }
}, 300);

尝试过加isLoading标记但没起作用，请求回来后还能继续触发。是不是防抖没生效？或者有其他边界条件没考虑到？

列表交互

我来解答赞 7 收藏

反馈

1 条解答

欧阳弯弯 Lv1

你这个问题是防抖没控制住连续触发，加个 loading 状态锁就行了。

let isLoading = false;

const handleScroll = debounce(() => {

  if (isLoading) return;

  const { scrollTop, clientHeight } = document.documentElement;

  const documentHeight = document.body.scrollHeight;

  if (scrollTop + clientHeight >= documentHeight - 200) {

    isLoading = true;

    fetchData().finally(() => {

      isLoading = false;

    });

  }

}, 300);

2026-02-11 09:01