如何添加去抖時間到驗證服務Angular2？

-1

我有，我想驗證用戶名文本框但是每個按鍵被髮送HTTP請求和它有點垃圾的問題，這是我當前的代碼：如何添加去抖時間到驗證服務Angular2？

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

如果有的話，我會在哪裏添加反彈計時器？我試圖將它添加到響應服務，但它拋出了一個未定義的錯誤。

來源

2017-08-23 M.Itani

你可以建立一個解決問題的解決方案嗎？ – DeborahK

每個可觀察的（也是http.get）都可以設置debounceTime和debounce。

來源

2017-08-23 12:10:23 Carsten

在你訂閱你的承諾之前，請添加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)哪裏lookupService稱之爲subscribes數據

來源

2017-08-23 14:11:03 mxr7350

延遲正在發生，但它仍然爲10個字符的輸入發射10次。我想在輸入完成後發送請求。我試圖增加一個去抖時間，但它只能延遲10個輸入 –

過嗎？你使用模板驅動還是反應形式？

如果您正在輸入元素上訂閱valueChanges，則可以在那裏添加debounceTime。

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

來源

2017-08-23 19:50:27 DeborahK

對於10個字符的輸入，請求仍然發射10次。我正在使用反應形式。 –

如何添加去抖時間到驗證服務Angular2？

回答

相關問題