Debouncing Breakdown

Question

I found the following code online and I'm trying to implement it to work with a resize event listener and am struggling to understand the intricacies of how it works. Would someone be willing to break it down into speak that someone with only 3 months experience of JS/Jquery would understand? A few pointers as to what I'm struggling with (which is most of it, but I'll define the really perplexing parts) where is "arguments" or the variable "args" that it's value has been assigned to defined? How does one pass "immediate" into the debounce function. etc. etc.

function debounce(func, wait, immediate) {
    var timeout;

    return function() {

        var context = this,
            args = arguments;


        var later = function() {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };

        var callNow = immediate && !timeout;

        clearTimeout(timeout);

        timeout = setTimeout(later, wait);

        if (callNow) func.apply(context, args);

    };
};

var debounceHeightSet = debounce(function() {
    numHeightset();
}, 250);

score 0 · Accepted Answer · answered Sep 25 '14 at 09:52

0

Arguments is an array which Javascript makes only when its requested so you don't define this. Also its not a good practice to use arguments in javascript because of Performance issues and also security issues.

Args is defined in this code though.

var context = this,
    args = arguments;

The above statement is way to define multiple variables using comma. So you don't need var keyword for all the variables.

var callNow = immediate && !timeout;

Above is a check so "immediate" has to be a "boolean".

So you can call this function as

var debounceHeightSet = debounce(function() {
  numHeightset();
 }, 250,true);

As functions are first class objects in Javascript, various use of functions are used here in this code. Example : 1) Function 'func' is received as an argument of the function 'debounce'. 2) Also a function is returned from the function "debounce".

Note : The function returned here is an anonymous function because we don't need a name here. The one calling "debounce" can store it an any variable.

answered Sep 25 '14 at 09:52

Ice Box

1,514
1
14
25

Thanks for clarifying regarding the "immediate" boolean parameter. So my basic understanding of it is that inside the later function setting "timeout = null;" means that any function calls during the "wait" duration (set when debounce is assigned to "debounceHeightSet" and passed to a setTimeout core method) are ignored. Whereas if a boolean parameter is passed to "debounce(function() {...}, true)" the calls aren't ignored? Could you explain exactly what is happening when "func" is having the .apply() method chain to it with the parameters "context" and "arg"? – user3586963 Sep 25 '14 at 10:09
var callNow = immediate && !timeout; When you call debounce you add the time of wait also. And a timer is created in the code which will execute after "wait". So the code is checking whether a timer is already present or not. If the timer is already present then the call now becomes false and func will not get executed. – Ice Box Sep 25 '14 at 10:26
checkout this link to understand apply "http://stackoverflow.com/questions/1986896/what-is-the-difference-between-call-and-apply" – Ice Box Sep 25 '14 at 10:40

Debouncing Breakdown

1 Answers1