JavaScript Throttling

Throttling is a technique used to limit the number of times a function can be executed in a given time frame. It’s extremely useful when dealing with performance-heavy operations, such as resizing the window or scrolling events, where repeated triggers can lead to performance issues.

function throttle(fn, delay) {
    let lastTime = 0;
    return function (...args) {
        let now = Date.now();
        if (now - lastTime >= delay) {
            fn.apply(this, args);
            lastTime = now;
        }
    };
}

In this example

• The throttle function takes a function (fn) and a delay (delay) as parameters.
• It keeps track of the last execution time using lastTime.
• When the function is called, it checks if the time difference from the last execution is greater than or equal to the delay.
• If so, it executes the function and updates lastTime.

Why is Throttling Needed?

Certain user interactions, like scrolling or window resizing, trigger events multiple times per second. Executing event handlers at such a high frequency can lead to performance issues, including:

• Increased CPU and memory usage.
• Unresponsive user interfaces.
• Inefficient API calls leading to server strain.

By throttling a function, we can ensure it executes at a controlled rate, reducing resource consumption and improving responsiveness.

How Throttling Works

Throttling works by restricting the execution of a function so that it runs at most once every predefined period, even if the event is triggered multiple times within that interval.

1. A function is triggered multiple times due to an event (e.g., scroll, resize).
2. Throttling ensures that the function executes only once within the defined interval.
3. Any additional triggers during the interval are ignored until the next cycle starts.
4. Once the interval is over, the function can execute again if triggered.

Implementing Throttling in JavaScript

1. Using setTimeout

A simple way to implement throttling is by using setTimeout. The function execution is delayed and only runs after the specified time interval has passed.

function throttle(fn, delay) {
    let isThr = false;

    return function (...args) {
        if (!isThr) {
            fn.apply(this, args);
            isThr = true;

            setTimeout(() => {
                isThr = false;
            }, delay);
        }
    };
}

window.addEventListener('scroll', throttle(() => {
    console.log('Scroll event triggered!');
}, 1000));

2. Using Date.now()

Another approach is to use Date.now() to keep track of the last execution time and determine when the function should be called again.

function throttle(fn, delay) {
    let t = 0;
    return function (...args) {
        let now = Date.now();
        if (now - t >= delay) {
            fn.apply(this, args);
            t = now;
        }
    };
}
window.addEventListener('resize', throttle(() => {
    console.log('Resize event triggered!');
}, 500));

Difference Between Throttling and Debouncing

Both throttling and debouncing are techniques for controlling function execution, but they serve different purposes:

Use Cases of Throttling

Throttling is commonly used in cases where frequent execution of a function can cause performance issues.

• Handling Scroll Events: Optimizing infinite scrolling by limiting API calls.
• Window Resize Events: Preventing excessive recalculations and re-renders.
• API Rate Limiting: Ensuring a function making API requests does not exceed allowed limits.
• Mouse Move Events: Improving efficiency in drag-and-drop interactions.