如何取消对新动作的执行？

Question

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

Answer 1

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

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

• lodash＃debounce
• 下划线#debounce

这将延迟分派动作，直到自上次分派该动作以来经过了一定的毫秒数为止。由于将分派操作，因此，每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} />);    
  }
}