What is the concept of "debounce"?

The origin of the concept of "debouncing" comes from the world of electronic engineering and exists to limit a physical constraint in our everyday devices.

Let's take as an example a simple electronic circuit made up of a switch:

When the latter is pressed, the electrical signal does not change smoothly and fluidly within the circuit, because when two metal plates come into contact, the vibrations emitted cause the plates to move closer together and farther apart very quickly for a few milliseconds.

These vibrations therefore generate "interference" in the circuit, sometimes a few dozen oscillations while the switch itself has only changed state once, this is what is called "bouncing".

To correct these signal anomalies, electronic circuits are designed to add a delay and ensure that the signal only changes state at most every x milliseconds for example, this is what is called "debounce"!

At the output of a switch that includes a debounce circuit, the signal will change state only once, in a perfectly clean way.

Debounce in programming

When building an electronic circuit controlled by programming (often called an "embedded system"), it is also necessary to compensate for the flaws of certain buttons (as explained above), or of certain sensors, which can occasionally send "parasitic" information.

But in software programming or on the web, there are also many examples of the "debounce" concept.

You know those text fields that perform a search as you add characters? Well, for optimization and user experience reasons, most of them use a "debounce" function to avoid sending a new request every time you add a letter.

For example, if you type more than one letter every 500 milliseconds, then only one request will be sent once you've finished typing, instead of sending 6 different requests for a 6-letter word!

Here is an example of a debounce function in Javascript:

An example in Javascript

let debounceTriggered = false;

//Will check if button has been pressed less than 500ms ago
function debouncedAction(){
    if(!debounceTriggered){
    	debounceTriggered = true;
        myAction();
        setTimeout(()=>{
        	debounceTriggered = false;
        },500);
    }
}

//Check button click
document.querySelector("#btn").on('click',(e)=>{
    debouncedAction();
});

Of course, there are debounce functions in most of the utility libraries you can find on the web, such as in Underscore.js or Lodash.