javascript - 仅处理 Angular 中最新异步请求的响应的模式？

Question

已发现有关去抖动输入和处理响应的错误。

我有一个搜索输入，可以在您键入时查询服务器。我将它的去抖设置为 300 毫秒。然而，有时会有一些奇怪的行为:

用户键入“ab”，等待 300 毫秒，然后在第一个请求解决之前键入“c”。他们在搜索栏中看到“abc”，但现在有两个网络请求。有时第二个请求(“abc”)首先解析，然后第一个请求(“ab”)解析并覆盖结果列表。因此，用户看到“ab”的结果列表，但搜索输入有“abc”。

这似乎不是一个反跳问题本身，而是更像是找到一种方法来丢弃“旧” promise ，以便在解决时可以忽略它们。

举个例子——我想要什么

• 输入“ab”
• 发送请求“ab”
• 键入 “c”
• 发送请求“abc”
• “abc”返回响应，处理 promise 解析
• “ab”返回响应，忽略 promise

在 Angular 中是否有针对此类事情的任何通用模式/方法？这听起来像是一个常见问题。

例如“仅解决创建的最新 promise ”？

Answer 1

这是引入RxJS 的完美用例，Angular 2 默认支持RxJS。但是在 Angular 1 中也可以使用这个库，查看官方的 rx.angular.js 库 here .

如果您包含此库，您应该能够按如下方式解决您的问题:

HTML

<input type="text" ng-model="search">

JS

observeOnScope($scope, 'search')
  .debounceTime(300)
  .distinctUntillChanged()
  .switchMap(search)
  .safeApply($scope, function (data) {
     $scope.data = data;
  })
  .subscribe();

function search() {
  return rx.Observable.fromPromise($http({ ... }));
}

编辑:可以在 here 上找到更深入的文章