滚动到页面底部 loadMore 被多次调用

Question

我有一个页面，其中显示了配置文件列表，当用户滚动到页面底部时，查询应该加载更多数据。 loadMore function 按预期工作，但我的错误出现在侦听器中，因为当用户快速滚动到底部时，它被调用了 5 次以上。

const listener = useCallback(() => {
    if (window.innerHeight + window.scrollY >= document.body.scrollHeight) {
      loadMore();
    }
  }, [loadMore]);

  useEffect(() => {
    window.addEventListener('scroll', listener);
    return () => window.removeEventListener('scroll', listener);
  }, [listener]);

这会导致在新查询中显示相同的项目，因为它向 loadMore 发送相同的数据。

当我慢慢滚动时，它起作用了。 当我滚动到底部时，快速加载相同的配置文件 5 次。 它在侦听器的 if 语句中。

Answer 1

你用的是mac电脑吗？ 如果您使用 mac 鼠标快速滚动到底部，它总是在分数用完后停止，当滚动 position 处于您的检测区域时，它将继续触发事件。

使用去抖动

这里很好地解释了如何使用 debounce来防止代码中的快速重复触发。

或者

使用变量和超时

// Set a variable that indicates the state of pulling profile
var pulling_data = false;

// Ignore if it's true, otherwise et to true when users scroll into your detect zone
if (pulling_data) return;

// An example of fetching data

Ajax({
    before() {
        pulling_data = true;
    }
}).then(res => {
    // Handles data
}).catch(err => {
    // Handles error
}).then(() => {
    let timer_id = setTimeout(() => {
        pulling_data = false;
    }, 1000); // 1 second
});

在上面的例子中，无论用户以多快的速度反复触发拉取配置文件数据，它总是运行一次，并且在当前请求完成后 1 秒才使下一个请求可用。 当然，您可以更改计时器或不使用计时器。

使用自定义事件来检测滚动何时结束

以下是创建检测滚动事件是否结束的一些示例。 您可以在触发事件时触发您的获取。