如何为验证服务 Angular2 添加去抖动时间？答案

【问题标题】：How to add debounce time to validation service Angular2?如何为验证服务 Angular2 添加去抖动时间？
【发布时间】：2017-08-23 11:59:35
【问题描述】：

我有一个问题，我想验证用户名文本字段，但是每个按键都在发送一个 HTTP 请求及其有点垃圾邮件，这是我当前的代码：

lookupUser(username: string): Observable<any> {
    let headers = new Headers();
    headers.append('User', sessionStorage.getItem('username'));
    headers.append('Token', sessionStorage.getItem('token'));
    headers.append('AccessTime', sessionStorage.getItem('AccessTime'));
    headers.append('Content-Type', 'application/json');
    let options = new RequestOptions({ headers: headers });

    return this.http.get("URL" + username, options)
        .map(this.extractData)
        .catch(this.handleError) as Observable<any>;
};

函数本身

export function usernameTaken(userService: UserService) {
    return control => new Promise((resolve, reject) => {
            userService.lookupUser(control.value).subscribe(data => {
                if (data.username) {
                    resolve({ usernameTaken: true })
                } else {
                    resolve(null);
                }
            }, (err) => {
                console.log("in error" + err);
                if (err !== "404 - Not Found") {
                    resolve({ usernameTaken: true });
                } else {
                    resolve(null);
                }
            });
        });
    }

如果有的话，我应该在哪里添加我的去抖计时器？我尝试将它添加到响应服务，但它引发了未定义的错误。

【问题讨论】：

你能建立一个演示这个问题的 plunker 吗？

标签： angular validation timer

【解决方案1】：

每个 observable（http.get 也是如此）都可以选择设置 debounceTime 和 debounce。

【讨论】：

【解决方案2】：

在您订阅您的承诺之前添加debounceTime(500)。

export function usernameTaken(userService: UserService) {
   return control => new Promise((resolve, reject) => {
        userService.lookupUser(control.value).debounceTime(500).subscribe(data => {
            if (data.username) {
                resolve({ usernameTaken: true })
            } else {
                resolve(null);
            }
        }, (err) => {
            console.log("in error" + err);
            if (err !== "404 - Not Found") {
                resolve({ usernameTaken: true });
            } else {
                resolve(null);
            }
        });
    });
}

在这种情况下，您的服务将在 subscribes 之前等待 500 milliseconds (.5 second) 到数据

【讨论】：

延迟正在发生，但对于 10 个字符的输入，它仍然会触发 10 次。我想在输入完成后简单地发送请求。我尝试为两者添加去抖时间，但它只会延迟 10 个输入

【解决方案3】：

lookupService 在哪里调用？您使用的是模板驱动的表单还是响应式表单？

如果您在输入元素上订阅 valueChanges，则可以在此处添加 debounceTime。

this.myControl.valueChanges.debounceTime(800).subscribe(...);

【讨论】：

对于 10 个字符的输入，请求仍会触发 10 次。我正在使用响应式表单。