Tengo dos botones selectores de cantidad.
Después de que el usuario haga clic en cualquiera de estos botones (aumentar o disminuir la cantidad), necesito ejecutar una función.
Pero el usuario puede hacer clic varias veces seguidas y quiero ejecutar la función solo una vez.
Como, espere 1 segundo después de cada clic para ejecutar la función. Si dentro de este segundo el usuario vuelve a hacer clic en el botón, reinicie el temporizador y espere otro segundo para ejecutar la función. Cuando el usuario no vuelva a hacer clic en 1 segundo, ejecute la función.
¿Cuál es la mejor manera de hacer eso en javascript vainilla?
Solo necesita iniciar un temporizador de 1 segundo y restablecerlo cada vez que se haga clic en el botón.
let timer function handleClick() { clearTimeout(timer) timer = setTimeout(doSomething, 1000); } function doSomething() { let div = document.getElementById("list") let p = document.createElement("p") p.textContent = "1 second passed without a click" div.append(p) } <!DOCTYPE html> <html> <body> <button onclick="handleClick()">Click me</button> <div id=list></div> </body> </html>Veo dos soluciones:
https://medium.com/nerd-for-tech/debouncing-throttling-in-javascript-d36ace200cea
Puedes probar esto en Vanilla JS:
const btn = document.querySelector('#btn'); const callback = event => { console.log(event); clearInterval(interval); } let interval; btn.addEventListener('click', event => { clearInterval(interval); interval = setInterval( () => callback(event), 1000); });Y el HTML:
<html> <body> <button id="btn">test</button> </body> </html>De esa manera, puede pasar la instancia del evento a su devolución de llamada.