react-virtualized 中无限滚动的去抖策略答案

【问题标题】：Debounce strategy for Infinite Scroll in react-virtualizedreact-virtualized 中无限滚动的去抖策略
【发布时间】：2018-09-18 10:38:09
【问题描述】：

我正在尝试处理我的用户尝试更快滚动或拖动滚动条对列表的某些部分进行随机搜索的情况。

我有一个大约 20000 个项目的数据集，我通过无限滚动向用户展示这些项目。

我使用了一个稀疏数组，该数组根据通过loadMoreRows 发起的数据获取进行水合，loadMoreRows 是我列表中的数据源。
当请求正在进行时，我在稀疏数组中保留带有 loadingIndicators 的点，并在请求正在进行时使用它为 isRowLoaded={this.onIsRowLoadedCheck} 返回 true。

我使用minimumBatchSize 的100 和threshold 的50

<InfiniteLoader
    isRowLoaded={this.onIsRowLoadedCheck}
    loadMoreRows={this.onLoadMoreRows}
    rowCount={this.props.items.total}
    minimumBatchSize={100}
    threshold={50}
>
    {({ onRowsRendered, registerChild }) => (
        <AutoSizer disableWidth>
            {({ height }) => (
                <List
                    ref={listViewRef => {
                        this.listView = listViewRef;
                        return registerChild(listViewRef);
                    }}
                    height={height}
                    onRowsRendered={onRowsRendered}
                    rowCount={this.props.items.total}
                    noRowsRenderer={this.onNoRowsRenderer}
                    overscanRowCount={20}
                    deferredMeasurementCache={cache}
                    rowHeight={cache.rowHeight}
                    rowRenderer={this.renderRow}
                    width={256}
                />
            )}
        </AutoSizer>
    )}
</InfiniteLoader>

我希望能够对服务器的调用进行去抖动，这样我就可以避免服务器过载，直到用户停止使用滚动条。

    onLoadMoreRows = (loadMoreRowsRange: LoadMoreRowsRange) => {
        const { startIndex, stopIndex } = loadMoreRowsRange;
        this.props.fetchItems(startIndex, stopIndex - startIndex + 1);
    };

是否有常用的策略来处理这种情况？

我看到之前在https://github.com/bvaughn/react-virtualized/issues/202 中讨论过类似的问题

【问题讨论】：

标签： infinite-scroll react-virtualized

【解决方案1】：

我知道这有点晚了，但以防其他人需要它。您可以使用常规的去抖动策略，例如（将 300 更改为您想要的任何 ms 值）：

onLoadMoreRows = (loadMoreRowsRange: LoadMoreRowsRange) => {
  clearTimeout(this.loadRowsTimeout)
  this.loadRowsTimeout = setTimeout(() => {
    const { startIndex, stopIndex } = loadMoreRowsRange;
    this.props.fetchItems(startIndex, stopIndex - startIndex + 1);
  }, 300)
};

或者您可以使用库中的 debounce 函数，例如 lodash：

const debouncedLoadMore = _.debounce(onLoadMoreRows, 300)

【讨论】：