Может ли rxjs контролировать максимальную частоту вызова функции?

Question

Я делаю приложение с естественной реакцией. Поскольку реквизиты onEndReached в FlatList проблематичны, 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 была ограничена раз в секунду (1000 мс). Это я должен использовать rxjs для этого?

Answer 1

Таким образом, одним из возможных решений может быть тема, в которую вы можете next () новое значение (distanceFromEnd). И тогда вы можете применить любую комбинацию операторов (включая 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
    });
}