如何让 RxJS 在下一次去抖动结束之前取消去抖动的 http 调用？答案

【问题标题】：How to make RxJS cancel a debounced http call before next debounce ends?如何让 RxJS 在下一次去抖动结束之前取消去抖动的 http 调用？
【发布时间】：2016-09-12 06:56:40
【问题描述】：

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

用户写“e”
用户等待 400 毫秒（去抖时间）
更新后端模型的 http 调用触发
用户快速写“eeeeeee”
http 调用返回更新后的模型，这会覆盖前端中的当前模型
文本输入变回“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()

【问题讨论】：

这真的是 Rx 问题吗？只需将客户视为权威。如果客户端有数据，假设客户端是对的

标签： javascript rxjs observable

【解决方案1】：

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

还请记住，this.itemService.save(item) 应该返回可丢弃的，这将在丢弃时取消 XHR 请求。

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

【讨论】：