javascript - 如何取消执行新 Action 时执行的先前 Action ？

Question

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

Answer 1

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

然而，我建议做的是，不要在每次用户在字段中键入内容时分派(dispatch)昂贵的操作，而是将去抖动功能应用于您的事件处理功能。这个函数在很多库中都有:

• lodash#debounce
• underscore#debounce

这将延迟调度 Action ，直到自上次调度该 Action 以来经过一定的毫秒数。它将大大减少大量繁重的异步操作，因为将分派(dispatch)操作，比方说，每 500 毫秒或 1 秒取决于您的配置而不是每个更改事件。

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} />);    
  }
}