検証サービスにデバウンス時間を追加する方法Angular2？

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

すべての観測可能な（したがって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); 
      } 
     }); 
    }); 
} 

あなたのサービスは、データ

Answer 3

lookupServiceと呼ばれる？に前500 milliseconds (.5 second)subscribesをお待ちしておりますかテンプレート駆動型または反応型を使用していますか？

input要素のvalueChangesを購読している場合は、代わりにdebounceTimeを追加できます。

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