Throlling/Debounce 无限滚动效果答案

【问题标题】：Throlling/Debouncing infinite-scroll like effectThrolling/Debounce 无限滚动效果
【发布时间】：2020-10-23 06:37:00
【问题描述】：

当我尝试添加请求下一页/上一页的效果时，我有一个带有寻呼机的列表，当前列表滚动到末尾/开头。向后滚动工作正常，但经常向前滚动多次，所以我需要以某种方式限制/去抖动它。

                <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() 什么都不做 - 它仍然会多次分页。

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

【问题讨论】：

标签： javascript reactjs dom pagination infinite-scroll

【解决方案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 });
                    }
                  }}

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

【讨论】：