CODEWITHSUNDEEP
javascriptsystem.reactiverxjs
Alwyn
Alwyn

Reputation: 8337

Sliding Window/Buffer in Reactive Framework

I want to create a variable length window/buffer of input events that lengthens as it receives additional events.

This is to implement "search as you type" functionality. I want to capture the click, but in order not to stress the server, I want to make the service call judiciously.

The logic I have in mind is to buffer the key strokes, starting from the first key down, until a key up + 1 second delay. So if the user is still typing (ie hitting the keyboard at a frequency of < 1 sec), we will not be calling the backside services. However once they stopped typing for 1 second, the call is made.

Upvotes: 4

Views: 947

Answers (1)

AirL
AirL

Reputation: 1907

I think what you are looking for is the Throttle feature from Rx.

To accomplish what you want in C# and Javascript (the question being tagged with c# and rxjs even if javascript is certainly what you need) :

In Rxjs, you'll find a great tutorial in here :

$(document).ready(function(){
    $('#myInput')
        .toObservable("keyup")
        .Select(function(){ return $('#myInput').val(); })
        .Throttle(500)
        .Subscribe(function(text){ console.log("fire up ajax call"); });
});

In Rx.Net, you'll find an interesting sample in here :

SearchTextChangedObservable = Observable.FromEventPattern<TextChangedEventArgs>(this.textBox, "TextChanged");
_currentSubscription = SearchTextChangedObservable.Throttle(TimeSpan.FromSeconds(.5)).ObserveOnDispatcher().Subscribe(e => this.ListItems.Add(this.textBox.Text));

Hope this helps.

Upvotes: 3

Related Questions