如何在下次去抖结束前让RxJS取消去抖的http电话？

Question

我有一个输入字段，可以通过REST api更新模型。

1. 用户写“e”
2. 用户等待400毫秒（去抖时间）
3. 用于更新后端模型的http调用
4. 用户快速写“eeeeeee”
5. http调用返回更新的模型，这将覆盖前端的当前模型
6. 文本输入更改回“e”，用户无需执行任何操作

我现在的代码看起来像这样（RxJS 5.0.0-beta.6）：

this.textInput
    .valueChanges
    .map(change => this.item.text = change)
    .debounceTime(400)
    .switchMap(
        change => this.itemService.save(item)
    )
    .subscribe(updatedItem => this.item = updatedItem)

我想要发生的是，如果用户写入更多文本，它应该取消之前的http呼叫，即使我们仍在等待去抖动完成。

  

PS：flatMapLates()在RxJS 5中重命名为switchMap()

Answer 1

您可以使用flatMapLatest运算符。它类似于flatMap，但在新值到达时将取消订阅流。

另请注意，this.itemService.save(item)应返回一次性弃置，以取消处置时的XHR请求。

在这里，我创建了jsbin for you来展示它是如何工作的（打开网络选项卡输入，你会看到已取消的请求）