2

发现了一个关于去抖动输入和处理响应的错误。

我有一个搜索输入，可在您键入时查询服务器。我将它设置为 300 毫秒的去抖动。但是，有时会出现一些奇怪的行为：

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

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

例如 - 我想要什么

  • 类型"ab"
  • 发送请求“ab”
  • 类型"c"
  • 发送请求“abc”
  • "abc" 返回响应，处理承诺解决
  • "ab" 返回响应，忽略承诺

在 Angular 中，这类事情有什么常见的模式/方法吗？听起来这将是一个普遍的问题。

例如“仅解决已创建的最新承诺”？

4

2 回答 2

3

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

如果你包含这个库，你应该能够解决你的问题，如下所示：

HML

<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({ ... }));
}

编辑：可以在这里找到更深入的文章

于 2016-04-22T14:41:34.467 回答
1

您只需使用订阅即可实现此目的。

import { Subscription } from 'rxjs';  

export class Component  {
constructor(){}
    subscription: Subscription;

    getData() {
       // just check if subscription is already there then unsubscribe that 
        if (this.subscription) {
          this.subscription.unsubscribe();
        }
        this.subscription = this._http.get(url).subscribe(
          data => {
            console.log(data);
          },
          error => {
            console.log(error);
          }
        )

      }
}
于 2019-06-26T05:55:22.297 回答