Debouncing and Throttling in JavaScript

In the world of web development, responsiveness and performance are crucial aspects that impact user experience. Two techniques often used to optimize performance when handling events like scrolling, resizing, or typing are debouncing and throttling.

Debouncing

Imagine a scenario where a user is typing in a search bar, and with each keystroke, an API request is sent to get search results. This could result in many requests, possibly overloading the server and creating unnecessary strain. Debouncing addresses this problem by postponing the execution of a function until a set time period passes without any further events occurring.

function debounce(func,delay){
    let timeoutId;
    return function(...args){
       clearTimeout(timeoutID);
       timeoutId=setTimeout(()=>{
         func.apply(this,args);
       },delay);
    };
}

const debounceSearch=debounce(searchFunc,1000);

In above code, debounce takes a function(func) and a delay time(delay). It returns a new function that when called will execute the func after delay miliseconds, resetting the timer each time it is invoked. This ensures that the function is only called after the user has stopped typing for specific duration.

Throttling

Throttling, similar to debouncing, restricts how often a function can run. But, instead of waiting for a break in events, throttling makes sure the function is called at most once within a set interval.

function throttle(func,limit){
    let throttleId;
    return function(...args){
        if(!throttleId){
            func.apply(this,args);
            throttleId=true;
            setTimeout(()=>{
                throttleId=false;
            },limit);
        }    
    };
}

const throttledResize=throttle(resizeHandler,500);

In the above code, throttle takes a function (func) and a time limit (limit). It returns a new function that, when called, will run func at most once every limit milliseconds. If there are more calls during this time, they are ignored until the next interval starts.

Debouncing vs Throttling

While debouncing and throttling both address the issue of excessive function execution, they serve different purposes and are suitable for different scenarios.