如何使用 rxjs 实现去抖动？答案

【问题标题】：How can i implement debouncing with rxjs?如何使用 rxjs 实现去抖动？
【发布时间】：2021-09-08 21:35:24
【问题描述】：

我想实现去抖动。

Vanilla java 脚本代码如下所示

onInputChange(ev) {
    clearTimeout(this.timer);
    this.timer = setTimeout(() => {
      this.http.get('https://jsonplaceholder.typicode.com/users').subscribe(users => console.log('users', users));
    },700)
  }

但我找不到在我的角度组件中对 rxjs 执行相同操作的方法

我试过了

我找到了debounceTime 运算符，但它仍然每次都发出请求。没有1000毫秒的延迟

this.http.get('https://jsonplaceholder.typicode.com/users')
    .pipe(debounceTime(1000))
    .subscribe(users => console.log('users', users));

我也试过了

<input [(ngModel)]="newUser" (input)="onInputChange($event)" [formControl]="newUserControll"/>

   this.newUserControll.valueChanges.pipe(
    debounceTime(1000)
    switchMap(() => interval(1000))).subscribe(x => console.log('x', x))

但我明白了

',' expected. 错误

【问题讨论】：

你真的有可用的反应输入吗？因为那是需要去抖动的东西。你现在拥有它的方式真的行不通..你已经进行了 http 调用..
是的，我绑定了 formControl，我想防止在输入中的每个键类型上调用 http 请求...在绑定到 formControll 上的 valueChanges 后我该怎么做？
在 valuechanges 中管道去抖动..？
@MikeOne 我编辑了我的问题。你能看看它并告诉我我的错误在哪里吗？
不确定间隔在那里做什么。找到这个：stackoverflow.com/questions/35991867/…

标签： angular rxjs debouncing

【解决方案1】：

假设您想通过一些 debounceTime 调用 API 更改输入。在您的 HTML 中，您需要绑定该属性以获取搜索文本，如下所示。如果您看到与 ngModel 相关的错误，请确保已导入：

从“@angular/forms”导入 { FormsModule }；

<input placeholder="Search" [(ngModel)]="searchBy"(ngModelChange)="changed.next()" name="searchBy">

在您的 .ts 文件中：

public searchBy = '';
public changed = new Subject<string>();

ngOnInit() {
   this.changed.debounceTime(300).subscribe(() => {
       this.http.get('https://jsonplaceholder.typicode.com/users').subscribe(users => {
         console.log('users', users))
       });
   });
}

【讨论】：

@Debang - 当我尝试你的代码时，我得到 Property 'debounceTime' does not exist on type 'Subject' 错误
为什么我需要在这种情况下使用主题？难道只能用 fomrControll valueChanges 吗？
也许你正在使用我提供的另一个版本的 Angular。然后你必须以这种方式添加 debounceTime：this.changed.pipe(debounceTime(300))

【解决方案2】：

这里是实现 debounceTime 的示例代码

stackblitz 示例 - https://stackblitz.com/edit/angular-ivy-tsqwh9?file=src/app/app.component.ts

this.searchControl.valueChanges
  .pipe(
    debounceTime(2000),
    switchMap(searchTerm => {
      //Make Api call here
      console.log(searchTerm);
      return searchTerm; // Remove this code after implenting api call - This is only temporary line
      return; // return result of api call here
    })
  )
  .subscribe(result => {
    // Final api response
  });

【讨论】：

【解决方案3】：

正如其他人所提到的，您的问题是您在 http 调用之后放置了 debounce。您必须在之前您的 http 调用进行去抖动。

不正确的流程：

值变化 -> http 调用 -> 去抖动

正确的流程：

值变化 -> 去抖动 -> http 调用

switchMap的正确使用方式是这样的：

  data$ = this.newUserControl.valueChanges.pipe(
    debounceTime(1000),
    switchMap(userInfo => this.http.get(...))
  );

这是一个示例 StackBlitz 演示，您可以玩。

【讨论】：