The **`debounce()` function** forces a function to wait a certain amount of time before running again. 
The function is built to limit the number of times a function is called. 

Events such as scrolling, mouse movement, and keypress bring great overhead with them if they are captured every single time they fire. The function aims to reduce overhead by preventing a function from being called several times in succession.

# Implementation
The following implementation of `debounce` returns a function that, as long as it continues to be invoked, will not be triggered. The function will be called after it stops being called for N milliseconds. If `immediate` is passed as an argument to the function, the function triggers immediately and then waits for the interval before being called again.

On passing a function and a time interval to debounce, a function is returned that can be passed on to the event listeners that execute​ the function.

var returnedFunction = debounce(function() {
    // The function's code
}, 250);

window.addEventListener('resize', returnedFunction);

# Code
The following example displays an alert box 2 seconds after the user has stopped pressing the button. It passes the debounced function to the button's `onClick` event handler.


<html>
 <head>
 </head>
 <body>
    <button id="debounce"> 
        Click here
    </button> 
    
    <script> 
    var button = document.getElementById("debounce");
     
    const debounce = (func, wait, immediate)=> {
    var timeout;

    return function executedFunction() {
        var context = this;
        var args = arguments;
            
        var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
        };

        var callNow = immediate && !timeout;
        
        clearTimeout(timeout);

        timeout = setTimeout(later, wait);
        
        if (callNow) func.apply(context, args);
        };
    };
    button.addEventListener('click', debounce(function() { 
            alert("This alert box will be displayed after 2 seconds no matter how many times you press the button.") 
                            }, 2000)); 
    </script> 
 </body>
</html>



// Async Tests Example
/*
window.onModulesLoaded = new Promise( function( resolve, reject ) {
  setTimeout(function() {
    pTag = document.querySelector("div");
    pTag.innerHTML = '';
    newVal = document.createElement("p");
    newVal.innerHTML = 'Hello World';
    pTag.appendChild(newVal);
    resolve();
  }, 100)
});
*/

codemirror

How to use the debounce function in JavaScript

The debounce() function forces a function to wait a certain amount of time before running again. The function is built to limit the number of times a function is called. 