我有一个 Action 创建者,该 Action 创建者进行了昂贵的计算,并在用户每次输入内容时都会分派(dispatch)一个 Action (基本上是实时更新)。但是,如果用户输入了多个内容,则我不希望以前的昂贵计算完全运行。理想情况下,我希望能够取消执行先前的计算并仅执行当前的计算。

最佳答案

没有内置功能可在异步操作中取消Promise。如果您使用的是AJAX请求,则可以尝试手动实现取消,但是,如果您使用的是Fetch API,则无法实现取消(有关添加此功能here的讨论正在进行中)。

但是,我建议要做的是,与其在用户每次在字段中键入内容时每次都分配昂贵的操作,不如将反跳功能应用于事件处理功能。许多库中都提供此功能:

  • lodash#debounce
  • underscore#debounce

  • 这将延迟分派(dispatch) Action ,直到自上次分派(dispatch)该 Action 以来经过了一定的毫秒数为止。由于将分派(dispatch) Action ,因此每500ms或1s取决于您的配置而不是每个更改事件,因此它将大大减少大量的异步操作。

    lodash的实现示例:
    class MyComponent extends React.Component {
    
      constructor() {
        // Create a debounced function
        this.onChangeDelayed = _.debounce(this.onChange, 500);
      }
    
      onChange() {
        this.props.onChange(); // Function that dispatches an action
      }
    
      render() {
        return (<input type="text" onChange={this.onChangeDelayed} />);
      }
    }
    

    10-06 04:24
    查看更多