How to throttle Javascript functions

Is your front-end performance suffering from 'jank'?

If you have functions attached to event listeners in JS, such as ‘scroll’ or ‘resize’, these will fire continuously as the event occurs.

This can have a negative effect on front-end performance, and you might start to notice some ‘jank’ on your scrolling and/or your animations.

Jank refers to sluggishness in a user interface, usually caused by executing long tasks on the main thread, blocking rendering, or expending too much processor power on background processes.

It’s unlikely that you actually need your function to run as often as your browser can manage. Therefore, what you need is something that can limit, or ‘throttle, the frequency at which your function runs.

Introducing ‘throttling’.

What is throttling in JS?

Throttling enforces a maximum number of times a function can be called over time. As in "execute this function at most once every 100 milliseconds."

‘Throttle’ is a close cousin of ‘debounce’, and the difference between these is explained in this CSS Tricks article.

Throttling the scroll function

In my case, I wanted to limit the execution of a function on scroll and therefore ‘throttling’ was more appropriate than a ‘debounce’.

After some research, I found this fiddle that demonstrates a simple throttle function on the ‘resize’ event. I repurposed this for my needs as follows.


// our simple throttle function
function throttle (callback, limit) {
    var wait = false;                  // Initially, we're not waiting
    return function () {               // We return a throttled function
        if (!wait) {                   // If we're not waiting
            callback.call();           // Execute users function
            wait = true;               // Prevent future invocations
            setTimeout(function () {   // After a period of time
                wait = false;          // And allow future invocations
            }, limit);
        }
    }
}

// the function that you want to be throttled
function doStuff(){

    // do some stuff

}

// On scroll, allow function to run at most 1 time per 100ms
window.addEventListener("scroll", throttle(doStuff, 100));

 

You can replace ‘scroll’ with ‘resize’ or any other event listener.

This is working for me, but do you know a better way? Tell us on Twitter!

(Photo by Donald Giannatti on Unsplash)

About the author

Co-founder and lead front-end developer at Highrise Digital. Keith has a passion for building beautiful, fast and usable websites.