Question

我正在尝试制作一个验证器，检查电子邮件地址是否已经存在，并且像往常一样，当用户仍然在输入字段中输入电子邮件地址时，我们不希望服务器被请求敲定。

目前代码如下

return Observable.timer(1000).switchMap(() => {
       return this.userService.emailExists(control.value)
        .mapTo(exist => Observable.of({ "emailExists": exist }))
        .catch(err => Observable.of({ "emailExists": true }));
    }).subscribe();

从阅读上一篇Stackoverflow帖子（https://stackoverflow.com/a/45080026/5247016）开始，当验证器一遍又一遍地运行时，它应该从之前的observable中取消取消（不排队）但不是似乎这样做，所以使用上面的代码我们得到服务器命中每次按键和1秒计时器执行。

https://stackoverflow.com/a/45080026/5247016 我的代码和帖子之间有区别 - 没有.subscribe（）没有任何作用，并且永远不会进行可观察的http调用 - 所以我只能假设对Angular或Rxjs的更新导致了这种行为的改变。

我们想要做的是，使用不使用setTimeout和clearTimeout的Observable，使用Angular形式async验证器只有在用户暂停/停止键入1秒左右时才向服务器发出请求。任何帮助将不胜感激。

Answer 1

您应该使用debounceTime运算符而不是Observable.timer。

return this.userService.emailExists(control.value)
           .debounceTime(1000)
           .mapTo(exist => Observable.of({ "emailExists": exist }))
           .catch(err => Observable.of({ "emailExists": true }));

以下是DebounceTime的详细信息：

debounceTime 延迟源Observable发出的值，但 drops 如果新值到达源，则先前待决的延迟排放观察到。

检查新值时，Angular async valildator未取消订阅

1 个答案: