What is throttling in JavaScript and can you give me examples?

What is throttling in JavaScript and can you give me examples?

Throttling in JavaScript is a technique used to limit the number of times a function is executed over time. For example, if you have a function that handles window resizing, you might want to throttle it so that it only runs once every 200 milliseconds, rather than every time the resize event fires.

Can you show me a code example of throttling?

Sure! Here's a simple example of a throttle function:

function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function() {
        const context = this;
        const args = arguments;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if ((Date.now() - lastRan) >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}

You can use this throttle function to limit how often a specific function can be called.

What are some use cases for throttling?

Throttling is useful in scenarios like handling scroll events, resizing windows, or API calls where you want to limit the frequency of function execution to improve performance and reduce resource usage.

How does throttling differ from debouncing?

Throttling ensures a function is called at regular intervals, while debouncing ensures a function is only called after a certain period of inactivity. Throttling is great for continuous events, while debouncing is ideal for events that occur in bursts.