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

我有一个页面，其中显示了配置文件列表，当用户滚动到页面底部时，查询应加载更多数据。loadMore函数按预期工作，但我的错误在侦听器中，因为当用户快速滚动到底部时，它会被调用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语句中。

您使用的是mac电脑吗？如果您使用mac鼠标快速滚动到底部，它总是在分数磨损后停止，这将在滚动位置位于检测区域时继续触发事件

使用去盎司 这是为了防止在代码中快速重复触发

或

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

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

---

下面是创建滚动事件是否结束的检测方法。您可以在触发事件时触发抓取。

当我使用debounce时，它可以工作，但不是非常友好，因为加载新数据时会有延迟。我试着将秒数设为200和300，但它仍然有相同的行为。是的，我正在使用mac电脑。还有其他解决方法吗？我用另一种解决方案更新了我的答案。

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