0

Quiero hacer una cuenta regresiva para que cada 10 segundos muestre una palabra distinta, este contador arranca una vez que el usuario de play y si llega a 0 se reinicia y muestra otra palabra. Estará de esa forma hasta que el usuario de Stop. y hay un botón para siguiente palabra el cual al darle cambia la palabra automáticamente y reinicia el contador. El código que hice da muchos errores y se buguea

const [palabras] = useState(["Azul", "Collar", "Orgullo", "Tarjeta"]);
const [palabraRandom, setPalabraRandom] = useState("Random");
const [contador, setContador] = useState(10);
const [play, setPlay] = useState(false);

useEffect(() => {
    actualizarContador();
}, [play, contador]);

const actualizarContador = () => {
    if (contador < 0) {
        setContador(10);
        aleatorio();
    }
    if (!play) {
        clearInterval(intervalo);
        setContador(10);
    }
    const intervalo = setInterval(() => {
        setContador(contador - 1);
    }, 1000);
};

const aleatorio = () => {
    let i = palabras[Math.floor(Math.random() * palabras.length)];

    setPalabraRandom(i);
};

const siguientePalabra = () => {
    aleatorio();
    setContador(10);
};

2 respuestas 2

1

Podrías adaptar el siguiente código a lo que necesitas para la versión de React, te presento una versión funcional en HTML, lo que es importante es que almacenes el id del intervalo para cancelarlo cuando el usuario haga click en algún botón

const palabras = ["Azul", "Collar", "Orgullo", "Tarjeta"]
let timerId;

function randomRange(min, max) {
    return Math.random() * (max - min) + min;
}


function startAnimation() {
    const container = document.querySelector('#text')

    timerId = setInterval(() => {
    container.innerText = palabras[Math.trunc(randomRange(0, palabras.length))];
  }, 1000);
}

function cancelAnimation() {
    clearInterval(timerId);
}

startAnimation();
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"/>

<div style="height: 30px;">
<span class="badge rounded-pill bg-dark" id="text" style="color: white"></span>
</div>
<button class="btn btn-primary" onclick="startAnimation()">
  Iniciar
</button>
<button class="btn btn-danger" onclick="cancelAnimation()">
  Cancelar
</button>

1
  • Puede funcionar y lo adapté al código pero la variable global que tiene el Id del setInterval no me la reconoce cuando le asigno un valor dentro de la función startAnimation(). Si le quito el signo de asignar no hay ningún problema pero necesito asignarle eso que hiciste tu el 8 may. 2021 a las 6:10
1

Estas creando un loop infinito en el useEffect porque al tener como dependencia a contador al momento de llamar a la función actualizarContador actualizas a contador que al cambiar llama a useEffect que a su vez cambia el contador y así sucesivamente.

Una manera de lograr la funcionalidad esperada seria primero quitar a contador como dependencia de useEffect y usando setTimeout en lugar de setInterval

   useEffect(() => {      
          play && actualizarContador();
      }, [play]);

Para que puedas limpiar el timeout con las funciones de actualizarContador y SiguientePalabra podrías crear un state

const [time, setTime] = useState(null)

Luego en actualizar contador cambiar play a false al inicio y luego a true al terminar el setTimeout de esta manera llamara nuevamente a useEffect.

const actualizarContador = () => {     
      if (contador < 0) {         
          setContador(10);
          aleatorio();
          setPlay(false)
      }
      if (!play) {          
          clearTimeout(time);
          setContador(10);
      }
      setPlay(false)

      setTime(setTimeout(() => {
          if(contador >=0) setContador(contador - 1);
          setPlay(true)
      }, 1000));
  };

y en siguiente palabra

 const siguientePalabra = () => {
    clearTimeout(time)
    aleatorio();
    setPlay(true)
    setContador(10);
  };

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.