Question

我想实现去抖动。

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. 错误

Answer 1

这是实现 debounceTime 的示例代码

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

df[s == 'LHL']

Answer 2

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

不正确的流程：

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

正确的流程：

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

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

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

这是您可以玩的示例 StackBlitz 演示。

Answer 3

您不能在 http 请求中使用 debounceTime，您可以使用 Subject

import { Subject } from 'rxjs';
import { debounceTime } from 'rxjs/operators';

export class MyComponent {
  inputChange$ = new Subject();

  ngOnInit() {
    // create listener with debounceTime
    this.inputChange$.pipe(debounceTime(500)).subscribe({
      next: () => {
        // now make http call
        this.httpCall();
      }
    })
  }

  onInputChange() {
    // emit change
    this.inputChange$.next();
  }
  
  private httpCall() {
    this.http.get('https://jsonplaceholder.typicode.com/users').subscribe(users => console.log('users', users));
  }

}

Answer 4

假设在输入更改时，您想要调用带有一些 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))
       });
   });
}

我如何使用 rxjs 实现去抖动？

4 个答案: