RxJS Service Call Throtting / Queuing - rxjs

Question

I'm attempting to use RxJS to implement service call throttling / queuing.
For example, Google Maps' Geocoder API. Let's say I don't want this to be called more than once a second, but one or more parts of my application may request a geocode more often than that. I'd want the requests to queue, with adjacent requests being at least 1s apart, but I'd also want to be able to 'cancel' a request if it no longer becomes required during this wait.
Is this an applicable use of RxJS, and if so what might this look like?
Thanks.

Answer 1

Here is something that should guide you (jsfiddle):
// Helper functions
function remove_from_queue(queue, id) {
queue.forEach(function(x, index){
if (x.execute.request === id) {
queue.splice(index, 1);
}
});
// console.log('queue after removal', queue);
}
function add_to_queue (queue, id){
queue.push({execute : {request : id}});
}
function getFirstInQueue(queue){
return queue[0];
}
function noop(x) {}
function log(label) {
return function (x) {
console.log.call(console, label, x);
}
}
function timestamp(label){
return function (x) {
console.log.call(console, Date.now() - startingDate, label,x );
}
}
function label(label){
return function (x) {
var res = {};
res[label] = x;
return res;
}
}
var startingDate = Date.now();
var requests$ = Rx.Observable.generateWithRelativeTime(
{request : 1},
function (x) { return x.request < 10; },
function (x) { return {request : x.request + 1}; },
function (x) { return x; },
function (x) { return 100 ; }
);
var cancelledRequests$ = Rx.Observable.generateWithRelativeTime(
{request : 1},
function (x) { return x.request < 20; },
function (x) { return {request : x.request + 4}; },
function (x) { return x; },
function (x) { return 500 ; }
);
var timer$ = Rx.Observable.interval(990).map(function (){return {}}).take(10);
var source$ = Rx.Observable.merge(
requests$.map(label('execute')),
cancelledRequests$.map(label('cancel')),
timer$
)
//.do(log('source'));
controlledSource$ = source$
.scan(function (state, command){
var requestsToExecuteQueue = state.requestsToExecuteQueue;
if (command.cancel) {
remove_from_queue(requestsToExecuteQueue, command.cancel.request);
}
if (command.execute) {
add_to_queue(requestsToExecuteQueue, command.execute.request);
}
console.log('queue', requestsToExecuteQueue.slice())
return {
command : command,
requestExec$ : Rx.Observable
.return(getFirstInQueue(requestsToExecuteQueue))
.filter(function(x){return x})
.do(function(x){remove_from_queue(requestsToExecuteQueue, x.execute.request)}),
requestsToExecuteQueue : requestsToExecuteQueue
}
}, {command : undefined, requestExec$ : undefined, requestsToExecuteQueue : []})
.pluck('requestExec$')
.sample(Rx.Observable.interval(1000))
.mergeAll();
controlledSource$.do(timestamp('executing request:')).subscribe(noop)
Basically :
scan is used to manage the state (queue of requests, addition and removal)
for each request, we pass an observable which (when subscribed to) releases the first element of the queue, and remove that element from the queue
sample is used to get one such observable every second
mergeAll allows to subscribe to that observable
we have to use a timer$ object to continue polling the queue even after the source of requests has completed (you still need to empty the queue of remaining requests). You can adapt that logic to your real case by having timer$ emitting for X seconds after completion of your source for example or whatever suits you best.