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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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