Question

我正在尝试处理我的用户尝试更快滚动的方案，或者拖动滚动条以随机搜索列表的某些部分。

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

我根据通过loadMoreRows发起的数据提取来使用稀疏数组，这是我列表中数据的来源。
当请求正在进行时，我在稀疏数组中保留带有loadingIndicators的点，并在请求正在进行时使用它来返回isRowLoaded={this.onIsRowLoadedCheck}的真值。

我使用的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

中看到过类似的问题

Answer 1

我知道这有点晚了，但是如果有人需要它的话。您可以使用常规的反跳策略，例如（将300更改为您想要的任何ms值）：

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

或者您可以从库中使用去抖动功能，例如lodash：

const debouncedLoadMore = _.debounce(onLoadMoreRows, 300)

反应虚拟化中的无限滚动的去抖策略

1 个答案: