The Debouncing technique

Event Listeners are really a great bonus for JavaScript. They help in improving the user’s experience and interaction with the web page. JavaScript has a lot of event listeners, a whole lot of them. These event listeners are very active and they keep watching your every move on a webpage (Beware! They are watching you!). When the desired action/event occurs, they immediately call the function that is attached to them.

As you know, computers are very fast, incredibly fast, a simple event can be fired a zillion times. For example, a scroll event listener will fire a million times for every scroll that you do, the same goes for the resize event. Just imagine how much load it can put on browsers if a function is called million times continuously? Phew! Poor browser 😔 Here comes our savior and hope “The debouncing and throttling function”.

Debouncing is a technique that is used to limit the rate of execution of a function. This drastically improves the performance of a browser, when a tedious function is attached to an event Listener like onScroll, onResize, etc. A debounce function in minimum takes two parameters – the function to be debounced and the wait time in milliseconds and in turn returns a debounced function. Now with this returned function you can debounce a scroll/resize event handler to be fired once for every specified wait time. A simple debounce function as taken from Underscore.js is given below, it is very simple, it simply calls the function passed to it at regular intervals using the setTimeout and clearTimeout functions.

// From Underscore.js library
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);
    };
};

 

You have read till here and still clueless about what a debouncing function is? I have an analogy for you 😃 Read until the end!I know a teacher back in my school, she was very good in teaching but at the same time, she had eyes all-over the school, in the walls, canteens, classrooms and literally everywhere. She used to watch all my mischiefs and report them back to my parents immediately. In short, she was a mischief listener (a kind of event Listener). As soon as I do a mischief and before I could reach home, there would be a great welcome ceremony organized by my mom with dad as a chief guest along with spicy scoldings and sometimes with more delightful trashings.

Let me write the above in JavaScript using JQuery

$('Samuel').on('mischief', reportHisParents());
As days went by, I became naughtier and thus she had to often report back to my parents. This was going on until one day, my parents became tired and annoyed by my mischiefs and her reportings. So, one day they visited my school and told her “Hello madam, It is good that you report our sons mistake every now and then, but we are tired of hearing them every day, can you please report them on a monthly basis, during every parents-teachers meet up?”. She replied “I would be glad to”, with an evil smile. From then on, my mischiefs were not reported immediately to my parents but only once in a month, during the Parents-teachers meetup. 😃
Then it became
var reportMonthly = debounce(reportHisParents(), 2629800000); 
// 2629800000ms = 1 month

$('Samuel').on('mischief', reportMonthly);

This is what debouncing does, it does not fire a function as soon as it is invoked, instead, it waits for the specified time and then fires the function.

Hope you understood the concept of debouncing. If you like this post and want more posts like this on the web and tech-related topics, please subscribe (there is a button in the bottom right corner). Also feel free to share your thoughts in the comment section 😃

Meet you with a next post about throttling function!

PS: I was a very good kid during my school days. You can find me on the first bench, doing all my homework on time and laughing at all the silly jokes that my teachers would crack. The story above was made up just to illustrate the concept of debouncing 😃 To know more about me visit my blog.

References:
JavaScript Debounce Function

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s