rxjs可以控制函数调用的最大频率吗？

Question

我正在制作一个反应本机应用程序。由于 FlatList 中的 onEndReached props 是有问题的，所以 onEndReached 可以在到达末尾时多次触发。

我听说 rxjs 可以使按钮的 onPress 在某些情况下仅被触发一次，即使用户多次点击它。

下面是Flatlist：

<FlatList
    data={paginatedList}
    ListHeaderComponent={() => this.renderHeader()}
    renderItem={({item, index}) => this.renderItem(item, index)}
    onEndReachedThreshold={0}
    onEndReached={(distanceFromEnd) => {
        console.log(distanceFromEnd); 
        this.setState({normalListLength: normalListLength + 10})
    }}
/>

我希望将 this.setState 函数限制为每秒一次 (1000ms)。我应该使用 rxjs 来做这个吗？

Answer 1

因此，一种可能的解决方案是拥有一个主题，您可以将新值 (distanceFromEnd) next() 放入其中。然后您可以应用任意运算符组合（包括 debounceTime）来强制执行频率限制。

请记住我的 React 语法可能不准确

<FlatList
  data={paginatedList}
  ListHeaderComponent={() => this.renderHeader()}
  renderItem={({item, index}) => this.renderItem(item, index)}
  onEndReachedThreshold={0}
  onEndReached={(distanceFromEnd) => {
    console.log(distanceFromEnd); 
    myOnEndReachedSubject.next(distanceFromEnd);
    this.setState({normalListLength: normalListLength + 10})
  }}
/>

// elsewhere define subject
myOnEndReachedSubject = new Subject<number>();

// ....elsewhere in a lifecycle function  
componentDidMount() {

  myOnEndReachedSubject
    .debounceTime(1000) // debounce for a second
    .distinctUntilChanged()
    .subscribe((distance) => {
       // Do something with distance
       // setState etc
    });
}

rxjs可以控制函数调用的最大频率吗？

Can rxjs control the maximum frequency of a function call?

rxjs

reactjs

react-native

react-native-flatlist