How to combine throttling with subscription in knockoutjs?

Question

I have a function that performs some communication with a server to report the current screen geometry, etc.

    function sendScreenLayout() { 
        logElementLocations(exp.getPageCoordinates());
    };

I subscribe this function to some events in my code like this:

viewModel.onLayoutChange.subscribe(sendScreenLayout);
$('#right-splitter > #mainContent').resize(sendScreenLayout);
$(window).resize(sendScreenLayout);
...
setTimeout(sendScreenLayout, 1);

Some of these events may get sent too frequently to be usefully handled by the server, and I would like to throttle the requests to some reasonable rate.

The best I could come up with was something like this:

var triggerSend = ko.observable();

ko.computed(function() {
    triggerSend();
    logElementLocations(exp.getPageCoordinates());
}).extend({throttle: 200});

function sendScreenLayout() {
    triggerSend.valueHasMutated();
}

Is there a more succinct way of capturing this pattern, or is this the way to go?

Answer 1

If you are using Underscore, you could use debounce like this:

var sendScreenLayout = _.debounce(function() { 
    logElementLocations(exp.getPageCoordinates());
}, 200);
...
$(window).resize(sendScreenLayout);
...

Otherwise, it's not really a pattern that Knockout supports directly. The solution you came up seems good enough, although here's an alternative:

var triggerSend = ko.computed({
    read: function() {},
    write: function(dummy) {
        logElementLocations(exp.getPageCoordinates());
    }
}).extend({throttle: 200});

function sendScreenLayout() {
    triggerSend(true);
}

Answer 2

Assuming your viewModel.onLayoutChange is an observable, you can simply do:

ko.computed(function() {
    viewModel.onLayoutChange(); //implicitly subscribes this callback to changes
    logElementLocations(exp.getPageCoordinates());
}).extend({throttle: 200});