每個函數調用清除超時Angular2 RxJS

我有一個http請求，如果用戶在輸入內輸入至少4個字符，並且每次更改其內容（添加/刪除字母）時觸發該請求。我想添加一個超時，如果用戶開始輸入字符，函數將等待1秒鐘，直到它觸發請求，以避免用戶在快速輸入時出現很多請求。我嘗試：每個函數調用清除超時Angular2 RxJS

if (this.pointName.length >= 3) { 
    let timer = function() { 
    this.http.get(`./points.json`) 
     .subscribe(res => { 
      this.pointsArray = res.json(); 
     }); 
    }; 
clearTimeout(timer); 
setTimeout(timer,1000);

我的想法是，以清除每個keyup事件超時，並再次進行設置。但不幸的是，它給了我一個錯誤，'類型'（）=> void'的參數不能分配給'number'類型的參數。

有沒有辦法更有效地做到這一點？也許使用RxJS？無論如何，我正在尋找一個可行的解決方案。先謝謝你。

HTML

<input type="text" id="searchInput" placeholder="Point name"(keyup)="getPoints()">

來源

2017-03-08 dragon

爲更好的方法你的場景是使用rxjs'debounce'運算符。 –

爲什麼不使用debounceTime（500），而不是setTimeout的。

所有的

https://www.learnrxjs.io/operators/filtering/debouncetime.html

來源

2017-03-08 11:56:30 silvelo

如果你有一個賬戶在egghead這個視頻是非常有用的你的情況。 https://egghead.io/courses/build-an-angular-2-instant-search-component – silvelo

它在我的情況下會是什麼樣子？我已經發布了keyup事件的HTML代碼。 – dragon

Punker簡單示例：https://plnkr.co/6xFvxfhmUROt68hCpgIh – silvelo

首先，你最好使用Debounce運營商RxJS。而你的代碼中的問題是，你應該通過timer_id到clearTimeout而不是該函數。

if (this.pointName.length >= 3) { 
    let timer = function() { 
    this.http.get(`./points.json`) 
     .subscribe(res => { 
      this.pointsArray = res.json(); 
     }); 
    }; 
let timer_id = undefined; 
clearTimeout(timer_id); 
timer_id = setTimeout(timer,1000);

來源

2017-03-08 12:05:07

試試這個：

創建RxJS主題爲您的組件的新成員變量

searchTerm$ = new Subject<string>();

在組件的ngOnInit方法，建立你的觀察到的，

ngOnInit() { 
    this.searchTerm$ 
     .filter(value => value.length >= 3) 
     .debounceTime(1000) 
     .switchMap(val => { 
     return this.http.get('./points.json') 
         .map(result => result.json()); 
     }) 
     .subscribe(result => .... // do what you want with the response); 
}

在您的HTML中，更改您的鍵盤事件綁定以提交輸入字段的值

<input type="text" id="searchInput" placeholder="Point name"(keyup)="getPoints(this.value)">

然後在組件的getPoints方法，發送一個值，你的主題$

getPoints(value) { 
    this.subject$.next(value); 
}

基本上，你創建的可觀察做幾件事情：

searchTerm$ 
    .filter(value => value.length >= 3) // 1 filter out search terms that are shorter than 3 characters 
    .debounceTime(1000)     // 2. only send events after no event comes for 1 sec 
    .switchMap(val => {     // 3. convert your value to the result of your http request 
    return this.http.get('./points.json') 
        .map(result => result.json()); 
    }) 
    .subscribe(result => .... // do what you want with the response);

來源

2017-03-08 13:20:08 snorkpete

每個函數調用清除超時Angular2 RxJS

回答

相關問題