Revisé SO y encontré este enlace de respuesta y escribí mi enlace de solución, pero en realidad no funciona.
Tarea:
Mi código:
const cards = document.getElementsByClassName('card-wrapper'); function onMouseMoveHandler(e) { return debounce(() => update(e)); } function debounce(func) { let isCan = true; return () => { if (isCan) { func(); isCan = false; setTimeout(() => isCan = true, 500); } } } function update(e) { console.log(e); } for (let i = 0; i < cards.length; i++) { cards[i].onmousemove = onMouseMoveHandler; } body { display: flex; } .card-wrapper { margin: 2%; width: 300px; height: 150px; } .card { width: 100%; height: 100%; background: blue; } <div class="card-wrapper card-1"> <div class="card"></div> </div> <div class="card-wrapper card-2"> <div class="card"></div> </div>Envolvió onMouseMoveHandler en una función que evita que se llame a la función rebotada. Si bien podría hacer debounce(...)() para llamarlo, ese no será el comportamiento que desea. En su lugar, debe convertirla en una variable simple y asignarla a la función de rebote return from debounce .
// no need for a function! const onMouseMoveHandler = debounce((e) => update(e)); // or just debounce(update); function debounce(func) { let isCan = true; return () => { if (isCan) { func(); isCan = false; setTimeout(() => isCan = true, 500); } } } function update(e) { console.log(e); } for (let i = 0; i < cards.length; i++) { cards[i].onmousemove = onMouseMoveHandler; }