<button id="myBtn">Click me</button>
/*
Debounce methods do not execute when invoked, they wait for pause over a configurable time before executing & if the same method is called again the previous is cancelled & the timer restarts.
*/

// document.getElementById('myBtn').addEventListener('click', () => {
//   console.log('click');
// })

/**
@param callback {function}
@param wait {number}
**/
function debounce(callback, wait) {
  let timerId;
  return (...args) => {
    clearTimeout(timerId);
    timerId = setTimeout(() => {
      callback(...args);
    }, wait);
  };
}

document.getElementById('myBtn').addEventListener('click', debounce(() => {
  console.log('click');
}, 2000))
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.