Gandalf StormCrow Gandalf StormCrow - 6 months ago 22
Javascript Question

How to properly debounce ajax requests

I have a checkbox than can toggle certain behaviour, however if someone makes a 100 consecutive clicks I don't want to send 100 requests to my server side.

This is what I got in place so far (found this code snippet):

deBouncer = function($,cf,of, interval){
var debounce = function (func, threshold, execAsap) {
var timeout;
return function debounced () {
var obj = this, args = arguments;
function delayed () {
if (!execAsap)
func.apply(obj, args);
timeout = null;
}
if (timeout)
clearTimeout(timeout);
else if (execAsap)
func.apply(obj, args);
timeout = setTimeout(delayed, threshold || interval);
}
}
jQuery.fn[cf] = function(fn){ return fn ? this.bind(of, debounce(fn)) : this.trigger(cf); };
};


In my document ready function :

deBouncer(jQuery,'smartoggle', 'click', 1500);


Then the event itself :

$(window).smartoggle(function(e){
MyToggleFunction();
});


This works as I've put 1500 ms to be the debouncing period, so if you click n times withing 1500 ms it will send only the latest state to the server.

There is however side effect of using this, now my click event for other stuff is messed up. Am I doing something wrong here? Is there a better way to debounce?

Answer

Not sure if there can be a "proper" way to do this.

Having said that underscore has such a utility that will create a debounced version of your function...

var MyToggleDebounced = _.debounce(MyToggleFunction, 1500);

then use MyToggleDebounced in your click handler.

Link to debounce docs on underscorejs

Take a look at the annotated source for how they do it.

Comments