Throttle Time VS Debounce Time

Debouncing and throttling are techniques in javascript that improve website performance in two distinct ways. While both are used to limit the number of times a function executes, throttling delays execution, thus reducing notifications of an event that fires multiple times. On the other hand, debouncing bunches together a series of calls into a single call to a function, ensuring one notification for multiple fires. Often used on functions that need to be called frequently or at regular intervals, they serve as great tools to simplify website code.

THROTTLE TIME

# Throttling tells us the maximum number of times a function can be called over a period of time. It executes the function once every 100 milliseconds.

Supposing, under a normal circumstance, you would call this function 1,000 times over 10 seconds. If you throttle it only once per 100 milliseconds, it would only execute that function 100 times

(10s * 1,000) = 10,000ms

10,000ms / 100ms throttling = 100 maximum calls

const throttle = (func, limit) => {

let inThrottle

return function() {

const args = arguments

const context = this

if (!inThrottle) {

func.apply(context, args)

inThrottle = true

setTimeout(() => inThrottle = false, limit)

}

}

}

DEBOUNCE TIME

# Debouncing means that a function will not be called again until a certain amount of time has passed without it being called. It executes this function only if 100 milliseconds have passed without it being called.

This function is called 1,000 times in a quick burst, dispersed over 3 seconds, then stops being called. If we debounce it at 100 milliseconds, the function will only fire once, at 3.1 seconds, once the burst is over. Each time this function is called during the burst it resets the debouncing timer.

# What’s the point?

A major real-time example for these concepts are certain DOM events, like scrolling and resizing. For example, if you attach a scroll handler to an element, and scroll that element down to say 5000px, you’re likely to see 100+ events being fired. If your event handler performs multiple tasks (like heavy calculations and other DOM manipulation), you may see performance issues (jank). If you can get away with executing that handler fewer times, without much interruption in experience, it’s probably worth it.

How to do it

Functions for both throttle and debounce time are built into Underscore and Lodash. Even if you don’t use those libraries wholly, you can always extract the functions out of them for your use.

const debounce = (func, delay) => {

let inDebounce

return function() {

const context = this

const args = arguments

clearTimeout(inDebounce)

inDebounce = setTimeout(() => func.apply(context, args), delay)

}

}

Simple throttled scroll:

$("body").on('scroll', _.throttle(function() {

// Do expensive things

}, 100));

Simple debounced resize:

$(window).on('resize', _.debounce(function() {

// Do expensive things

}, 100));

The inference to draw is that throttling and debouncing are used in different situations. Both are used for multiple calls to a function. Throttling ensures the original function is called once per specific period while debouncing bunches a series of calls into one.
We are an ERP development company with the goal of aiding enterprises to embrace innovation with our vast technological stack. From developing eCommerce web and mobile application to dashboard applications, we’ve got you covered for all your ERP needs. Get in touch with our experts to build your website now!