CODEWITHSUNDEEP
javascriptrxjs
jhamm
jhamm

Reputation: 25032

Why isn't throttle working?

I am creating a auto complete box with rx. Here is my code:

let input = document.getElementById('input');
var keypresses = Observable.fromEvent(input, 'keyup');

var searchResults = keypresses.
    throttle(100).
    map(key => {
        return getResults(input.value);
    }).
    switchLatest();

let results = document.getElementById('results');
searchResults.forEach(resultSet => results.value = resultSet);

This is making an http call to wikipedia. I would expect throttle to only send through data if I wait 100 ms between keyup's, but it is sending an http request with each keyup.

You can see in the image that it is making a separate call with each keypress.

chrome console

What am I doing wrong? How do I get throttle to do what I expect it to do?

Upvotes: 1

Views: 148

Answers (1)

user3743222
user3743222

Reputation: 18665

Is it Rx.Observable.prototype.debounce you are looking for? Cf. https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/debounce.md.

It says : Ignores values from an observable sequence which are followed by another value within a computed debounced duration.

Truth is debounce and throttle are easily confused, hope that it is what you are looking for. In Rxjs 2, the semantics are actually reversed, so check the version that you are using and the corresponding documentation.

Actually you can also have a look here for an example of debounce for autocompletion with Rxjs : https://github.com/Reactive-Extensions/RxJS/blob/master/examples/autocomplete/autocomplete.js

Upvotes: 4

Related Questions