javascript - DebounceTime 发出该时间内捕获的所有事件

Question

我需要为 Angular 中的响应式(Reactive)表单类型编写异步验证器。我已经通过 promise 实现了它。但问题是验证器每次击键都会触发它，每次击键都会触发服务器。为了实现去抖，我已经为 Promise 实现了 setTimeout，但我面临的问题是它在我定义的某个毫秒后触发。最后，我在 promise 中实现了 Observable 以实现所有 debounceTime，但我在这里面临的问题是 debounceTime 发出所有事件。例如:如果我从输入字段中输入“Prem”，则以下代码会在超时时触发服务器四次。

如果异步验证器的实现有任何问题，请向我澄清。

//Latest code
static hasDuplicateEmail(formControl: FormControl) {
        return new Promise((resolve, reject) => {
            return new Observable(observer => 
               observer.next(formControl.value)).pipe(
                debounceTime(600),
                distinctUntilChanged(),
                switchMap((value) => {
                    //server side
                    return MotUtil.fetch('checkForRegisterEmail', {e: formControl.value});
                })
            ).subscribe((res) => {
                return (JSONUtil.isEmpty(res)) ? resolve(null) : resolve({duplicate: true});
            });
        });
    }

debounceTime 应该按照文档中提到的方式工作。

Answer 1

你正试图以一种困难的方式来解决它。验证器接受参数 - AbstractControl。 AbstractControl 具有属性 - valueChanges，它返回 formControl 中的更改流。因此，在这里您添加 debouceTime ，然后执行其他操作，最后将此流返回给 FormControl:

hasDuplicateEmail(control: AbstractControl) {
  return control.valueChanges.pipe(
    debounceTime(600),
    switchMap(e => 
      this.http.get('checkForRegisterEmail', {e}).pipe(
        map((res: any) => JSONUtil.isEmpty(res) ? null : { duplicate: true })
      )
    )
  )
}

正如你所注意到的，我使用 HttpClient，因为它是你在 Angular 中进行 HTTP 调用的方式(它被设计为在流上工作，而不是在 Promises 上工作)