Throlling/Debouncing 无限滚动效果

Question

当我尝试添加您请求 next/previous 页的效果时，我有一个带有寻呼机的列表，当前列表滚动到 end/beginning。向后滚动工作正常，但经常向前翻页多次，所以我需要 throttle/debounce 它，不知何故。

                <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().

当我throttle/debounce onScroll 效果时，它只是不分页。节流 handlePageClick() 什么都不做 - 它仍然多次分页。

Where/how 我应该处理这个吗？

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

此版本包括定制的节流支持。不知何故，我尝试过的标准库没有按预期运行。

Throlling/Debouncing 无限滚动效果

Throlling/Debouncing infinite-scroll like effect

javascript

pagination

dom

infinite-scroll

reactjs