<p>Move your mouse around and watch the couters

<p>Original counter: </p>
<p id="counter">0</p>
<p>Debounce counter: </p>
<p id="counter-bounce">0</p>
  
let i = 0; 
let j = 0;

let add = (event) => {
  document.getElementById('counter').innerText = i++;
}

let addDe = (event) => {
  document.getElementById('counter-bounce').innerText = j++;
}

let debounce = (fn, wait) => {
       wait = wait || 0;
       let timer = null;
       return (...args) => {
           clearTimeout(timer);
           timer = setTimeout(() => {
               fn.apply(this, args);
           }, wait);
       }
   } 

document.addEventListener('mousemove', add);

document.addEventListener('mousemove', debounce(addDe, 1000));
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.