Throlling/Debouncing无限滚动效果

Question

我有一个带有分页器的列表，当我试图添加一个效果时，你请求下一页/上一页，当前列表滚动到结束/开始。向后滚动工作正常，但向前滚动的页面通常会重复多次，因此我需要以某种方式限制/释放它。

                <div className={styles.property_container} ref={scrollContainerRef} onScroll={()=> {
                  if (scrollContainerRef.current.scrollTop + scrollContainerRef.current.clientHeight > scrollContainerRef.current.scrollHeight) {
                    console.log('move pager forward');
                    throttle(handlePageClick({selected: cur + 1}), 2000);
                  } else if (scrollContainerRef.current.scrollTop === 0 && cur > 0) {
                    console.log('move pager backward');
                    handlePageClick({selected: cur - 1});
                  }
                }} >
                  {pagedListings.map((property) => (
                    <Property
                      key={property.id}
                      id={property.id}
                      price={property.original_price}
                      imgUrl={property.medium_photo_url}
                      address={property.address}
                      permalink={property.permalink}
                      bedRooms={property.total_bedrooms}
                      bathRooms={property.total_full_baths}
                      acre={property.acre}
                      handleClick={handleClick}
                    />
                  ))}
                  {!pagedListings.length && (
                    <h2 className={styles.no_result}>No Result</h2>
                  )}
                </div>
                <ReactPaginate
                  previousLabel={previousSVG}
                  nextLabel={nextSVG}
                  breakLabel="..."
                  breakClassName="break-me"
                  pageCount={pageCount}
                  marginPagesDisplayed={1}
                  pageRangeDisplayed={4}
                  containerClassName="pagination"
                  subContainerClassName="pages pagination"
                  activeClassName="active"
                  initialPage={0}
                  onPageChange={handlePageClick}
                  forcePage={cur}
                />

我尝试了调节分页效果，在这个版本中，执行分页操作的是onScroll - handlePageClick()。

当我限制/去抖动onScroll效果时，它就是不翻页。限制handlePageClick()不会做任何事情-它仍然会多次分页。

我应该在哪里/如何处理这个问题？

Answer 1

以下是工作原理：

                  onScroll={() => {
                    const margin =
                      scrollContainerRef.current.clientHeight / 4;
                    if (
                      scrollContainerRef.current.scrollTop +
                        scrollContainerRef.current.clientHeight +
                        margin >
                        scrollContainerRef.current.scrollHeight &&
                      !wait
                    ) {
                      console.log("move pager forward");
                      setWait(true);
                      handlePageClick({ selected: cur + 1 });
                    } else if (
                      scrollContainerRef.current.scrollTop === 0 &&
                      cur > 0
                    ) {
                      console.log("move pager backward");
                      handlePageClick({ selected: cur - 1 });
                    }
                  }}

此版本包含定制的节流支持。不知何故，我尝试过的标准库并没有像所希望的那样运行。