Question

我有一个问题，我想要验证用户名文本字段但是每个按键发送一个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);
                }
            });
        });
    }

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

Answer 1

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

Answer 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);
            }
        });
    });
}

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

Answer 3

lookupService在哪里被召唤？您使用模板驱动还是反应形式？

如果您在input元素上订阅valueChanges，则可以在那里添加debounceTime。

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

如何在验证服务Angular2中添加去抖时间？

3 个答案: