Javascript _.多次执行API

我有一个时间轴组件，一次渲染5篇文章

当用户滚动到页面末尾时，将调用节流功能

我试图将请求限制为每秒最多一次，但API被调用了多次

我尝试了以下几种解决方案：

• 制作一个全局标志，除非某个超时已过，否则不允许您使用该函数“这没有意义，因为我正在使用油门来执行此操作，但我尝试检查我的实现是否错误”

• 在组件外部单独声明节流功能

TimeLine.js

导出默认函数时间线（）{
const dispatch=usedpatch（）；
const posts=useSelector（state=>state.postReducer.posts）；
const loaded=useSelector（state=>state.postReducer.loaded）；
常数超时=1000；
//Loaded跟踪已加载的邮件
如果（加载===0）{
API.Post.getAllPosts（已加载）（调度）；
}
如果（加载>5）{
如果（已加载%5==0）window.scrollTo（0，document.body.scrollHeight*0.6）
}
addEventListener（'scroll'，（）=>throttledReq（已加载、超时、分派））；
const classes=useStyle（）；
返回(
{（posts&&posts.length>0）？posts.map（（post，index）=>(
))：false}
);
};

油门功能

const throttledReq=（已加载、超时、分派）=>\u0.throttle（e=>{
const bottomLimit=document.documentElement.offsetHeight-window.innerHeight；
if（document.documentElement.scrollTop===bottomLimit）{
API.Post.getAllPosts（已加载）（调度）；
}
}，超时）（）；

我的要求

---

每次滚动时，都会触发

dispatch

，然后重新运行组件，添加另一个事件侦听器。这将无限期地继续下去

您只希望在第一次呈现组件时添加事件侦听器。您可以使用

useffect

hook来实现这一点

useEffect(() => {
  window.addEventListener('scroll', () => throttledReq(loaded, TIMEOUT, dispatch));
}, []);

末尾的空数组意味着它没有任何依赖项，因此只要呈现组件，它就只运行一次。每个重新加载程序都不会调用回调

您的

loaded

值也应该使用

useffect

，但在这种情况下，

loaded

变量作为依赖项。每次更改加载的

时（以及在第一次渲染时），都会触发回调并评估逻辑

useEffect(() => {
  if (loaded === 0) {
    API.Post.getAllPosts(loaded)(dispatch);
  }

  if (loaded % 5 === 0) {
    window.scrollTo(0, document.body.scrollHeight * 0.6)
  }
), [loaded]);

由于您试图在到达滚动位置或某个元素处于视图中时调用某个逻辑，我建议您看看，它消除了限制的
onscroll
函数的要求。
请求号是固定的，但是现在如果我将loaded作为依赖项，则会多次调用该操作，使其加载大约10篇而不是5篇文章