我想在上次更改延迟后触发 onChange

Question

基本上，我有一个 angular 应用程序，我希望只有在几秒钟没有任何反应后才会触发（更改）。因此，不是每次在输入字段中写入一个字母时都发送请求，只有在写了一个字母并在几秒钟内没有任何反应后，才会发送请求。

Answer 1

您可以使用 rxjs debounceTime 管道连接到反应式 FormControl 的 valueChanges 可观察对象，如 https://stackblitz.com/edit/angular-debounce-form-control

中的示例

逻辑是使用 FormControl 获取对输入的引用并订阅 valueChanges 方法并通过管道传递 debounceTime 以仅在未触发时触发回调方法具体区间。

this.searchControl.valueChanges
.pipe(
    debounceTime(2000),
    distinctUntilChanged()
)
.subscribe(res => {
    //your API call
});

此处 distinctUntilChanged() 使订阅回调仅在发出不同值时执行。

Answer 2

https://stackblitz.com/edit/angular-rwrinz-sxjtfj

  this.control.valueChanges
          .pipe(
            debounceTime(1000), // Waiting for 1 sec while you are typing
            distinctUntilChanged() // Prevents the emitting if the 'start' value and the 'end' value are the same
          )
          .subscribe(value => {
            console.log(value);
            // TODO: call BE here with this.httpClient...
          });

别忘了取消订阅...

我想在上次更改延迟后触发 onChange

I want to trigger onChange after a delay from last change

input

timer

delay

angular