What is debounce in Javascript?

Hi, debounce in Javascript is a code technique that we can use to improve our applications performance.

Let see the next example:

// Gettin the input DOM by the id
let search = document.getElementById('search');
let counter = 1;

// Event listener - listen when "keyup" event happend
search.addEventListener('keyup', function() {
    // 1 execute this "betterFunction"
    performanceFunction();
});

// Function that simulate petitions to the server
let getData = () => {
    console.log('counter--->', counter++)
};

// Debounce function
function debounce(fn, delay) { // callback function
    let timer;

    return function() { // closure function

        let context = this; // Holding the current context

        clearTimeout(timer); // Cleanning the timer

        // Set timout that
        timer = setTimeout(() => {
            // after 300 milliseconds the getData function will be executed
            fn.apply(context, arguments); // Appling the current context and arguments to getData function
        }, delay); // after 300 milliseconds execute the code inside the arrow function
    }
}

// performanceFunction have by reference the "debounce" function
const performanceFunction = debounce(getData, 300);

Result:

This means that we are going to insert a delay (time) and after that time pass then the getData (petition to the server) will be executed, and in that way we can control the numbers of petitions that we make to the server all of this is “debouncing” and this is a good practice to have a better performance in our web applications.

By Cristina Rojas.