2

Ahora mismo tengo un programa muy simple que añade +1 a un contador:

const btn = document.getElementsByClassName("red-cross-LOGOS-clicker")[0];
const combo = document.getElementsByClassName("combo")[0];
let count = 0;

btn.addEventListener('click',()=>{
            count++;
            combo.innerHTML = count;
        });
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>037 : LOGOSclicker</title>
    <script type="text/javascript" src="js/037.js"></script>
</head>
<body>
    <div class="combo"></div>
<button class="red-cross-LOGOS-clicker">CLICK</button>
</body>
</html>

Me gustaría que cuando detectase que hayan pasado x segundos después del último click, reseteara el contador a 0.

He probado con un setTimeout, pero al final lo que hace es borrar y añadir a la vez a los dos segundos. Con intervalos no se me va a ocurrir hacerlo, porque voy a llenar de intervalos el programa y lo voy a ralentizar demasiado.

¿Cómo podría hacerlo?

1 respuesta 1

4

No entiendo por qué no te funcionaría con setTimeout. Ten en cuenta que vas a tener que quitar el timeout cada vez que lo actualices, con clearTimeout.

La función setTimeout te devuelve un número con el ID del timeout. Si pasas ese número a clearTimeout, te borra el timeout. Entonces lo único que tienes que hacer es borrar el timeout cada vez que se hace click en el botón, y crear uno nuevo.

En el ejemplo de abajo, el número se resetea cuando pasan 3 segundos sin hacer click en el botón. Si vas haciendo click no se reseta.

const btn = document.getElementsByClassName("red-cross-LOGOS-clicker")[0];
const combo = document.getElementsByClassName("combo")[0];
let count = 0;
let timeoutId = null;

btn.addEventListener('click',()=>{
  if (timeoutId) {
    window.clearTimeout(timeoutId);
  }
  count++;
  combo.innerHTML = count;
  
  timeoutId = window.setTimeout(() => {
    count = 0;
    combo.innerHTML = count;
  }, 3000);
});
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
    <title>037 : LOGOSclicker</title>
    <script type="text/javascript" src="js/037.js"></script>
</head>
<body>
    <div class="combo"></div>
<button class="red-cross-LOGOS-clicker">CLICK</button>
</body>
</html>

1
  • Que bueno, no me salía a mi con Timeout, genial, gracias!!
    – AQMR
    el 12 abr. 2021 a las 10:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.