Question

我有以下TSX代码：

public render() {    
  return (
    <div onWheel={this.onWheel}>
      {children}
    </div>
  );
}

private onWheel(event: React.SyntheticEvent<HTMLDivElement>) {...}

我想使用RxJS来限制this.onWheel次来电，以防止频繁的方法调用。

我该怎么做？

Answer 1

直接的解决方案是使用主题：

创建主题并通过限制组件装载
在每个事件中调用其“下一个”方法
取消订阅组件卸载

删除了TS符号的代码：

render() {    
  return (
    <div onWheel={e => this.onWheel$.next(e)}>
      {children}
    </div>
  );
}

componentWillMount() {
    this.onWheel$ = new Rx.Subject();
    this.onWheel$.throttleTime(500).subscribe(this.onWheel);
}

componentWillUnmount() {
    this.onWheel$.unsubscribe();
}

onWheel(event) {...}

有关工作示例，请参阅此jsfiddle。

如何通过RxJS限制对反应组件的方法的调用

1 个答案:

删除了TS符号的代码：