In electronics when you close a switch or connect a pair of wires together, you get a ripple of current that forms as the connection is coming together known as Contact Bounce this bounce or chatter can manifest itself as a number of closely spaced interrupts that can ruin your day as a programmer if they’re not supressed.

Likewise, in any system that generates a bunch of events your code needs to respond to as a group, you need a debounce function. Here is an example written in JavaScript.

function debounce(delay, callback) {
   let timeout;
   return function() {
      timeout = setTimeout(callback, delay);

A classic implementation example of debounce() is a type-ahead search box where you want the user to enter some text and then use the text they entered to conduct a search on a back-end database. Sending a search query to the back-end with each keystroke the user makes, puts undue (and needless) pressure on the back-end database. So we use a debounce to only send the search to the back-end once the user stops typing for a moment. e.g.

var searchBox = document.getElementById("searchBox");

searchBox.addEventListener("keyup", debounce(250, function(){
   // fetch some stuff from the database here

So we can see in the above example, if the user waits for 250ms or more, then the code will send the request to the back-end. However, if the user keeps typing then the debounce function will keep resetting it’s timeout until the user pauses input for at least 250ms.