_.throttle 多次执行 API

如何解决_.throttle 多次执行 API

我有一个 TimeLine 组件，它一次呈现 5 个帖子

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

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

我尝试了几种解决方案，例如：

• 制作一个全局标志，除非过了特定的超时时间，否则不允许您使用该功能“这没有意义，因为我正在使用油门来做到这一点，但我试图检查我的实现是否错误"

• 在组件外单独声明节流函数

时间线.js

export default function TimeLine() {
    const dispatch = useDispatch();
    const posts = useSelector(state => state.postReducer.posts);
    const loaded = useSelector(state => state.postReducer.loaded);
    const TIMEOUT = 1000;
    
  // Loaded keeps track of loaded posts
    if(loaded === 0){
        API.Post.getAllPosts(loaded)(dispatch);
    }

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

    window.addEventListener('scroll',() => throttledReq(loaded,TIMEOUT,dispatch));
    
    const classes = useStyle();
    return (
        <div>
            <NewPost  />

            {(posts && posts.length > 0)?posts.map((post,index) => (
                <div key={post._id} className={classes.post}>
                    <Post
                        currentIndex={index}
                        {...post.user}
                        dispatch={dispatch}
                        postID={post._id}
                        postContent={post.text}
                    />
                </div>
            )): false}
        </div>
    );
};

油门功能

const throttledReq = (loaded,dispatch) => _.throttle(e => {
    const bottomLimit = document.documentElement.offsetHeight - window.innerHeight;
    if(document.documentElement.scrollTop === bottomLimit){
            API.Post.getAllPosts(loaded)(dispatch);
    }
},TIMEOUT)();

我的要求

解决方法

每次滚动时，都会触发 dispatch，它反过来重新运行组件，添加另一个事件侦听器。这将无限持续。

您只希望在第一次呈现组件时添加事件侦听器。您可以使用 useEffect 钩子执行此操作。

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

最后的空数组意味着它没有任何依赖项，所以它只会在组件被渲染时运行一次。每次重新渲染都不会调用回调。

您的 loaded 值也应使用 useEffect，但在本例中使用 loaded 变量作为依赖项。每次更改 loaded 时（以及在第一次渲染时），都会触发回调并评估逻辑。

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

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

由于您试图在到达滚动位置或视图中的某个元素时调用特定逻辑，因此我建议您查看 Intersection Observer API，它消除了限制 {{1 }} 函数。