Debounce and Throttle in Real Life Scenarios
By: Kfir Zuberi
Tags: Debounce, Throttle, JavaScript, Performance, Front End Development

Debounce and throttle are two programming techniques that can save the day when it comes to performance. It’s important to know when to use them — but also important to know when not to use them.

Debounce and throttle are recommended to use on events that fire more often than you need them to. You may have come across scenarios like this when binding to mouse movements and window events such as scrolling, push notifications and Ajax calls.

Debounce

Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. For example, “execute this function only if 100 milliseconds have passed without it being called.”

In other words: The debounce technique allows us to “group” multiple raised sequential functions into a single function.

Throttle

Throttling enforces a maximum number of times a function can be called over time. For example, “execute this function at most once every 100 milliseconds.”

In other words: By using throttle, we don’t allow to our function to execute more than once every X milliseconds.

Live demo performance implication

I created some live demos to demonstrate the differences between debounce and throttle. In these demos, I am firing calls on the mouse drag event. The first demo is binding without debounce or throttle, the second is with debounce binding, and the last one is with throttle binding.

Each time the WalkMe logo is dragged, a callback is called. In the top right corner, you can see the actual number of callback calls. In addition, I added a timeline chart to visualize the callback calls during the drag. Go ahead and try to drag the WalkMe logo to see the difference without debounce and with debounce/throttle.

Regular binding to drag event

Debouncing binding to drag event

Throttling binding to drag event

How to implement debounce throttle

Debouncing implementation

// as long as it continues to be invoked, it will not be triggered

function debounce (func, interval) {

var timeout;

return function () {

var context = this, args = arguments;

var later = function () {

timeout = null;

func.apply(context, args);

};

clearTimeout(timeout);

timeout = setTimeout(later, interval || 200);

}

}

Throttling implementation

// as long as it continues to be invoked, raise on every interval

function throttle (func, interval) {

var timeout;

return function() {

var context = this, args = arguments;

var later = function () {

timeout = false;

};

if (!timeout) {

func.apply(context, args)

timeout = true;

setTimeout(later, interval)

}

}

}

And usage

var myHeavyFunction = debounce(function() {

// do heavy things

}, 250); window.addEventListener('mousemove', myHeavyFunction);

Real life example

Why and when do we need debounce or throttle?

I used debounce in my application in the search module. I have an input text box, into which the user can type terms and search for data. Of course, when the search process ends, the results are rendered on the screen. I bind the keypress event of the input text box to fire the search process: