es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Javascript clearInterval con intervalo Id no funciona en React JS.

27 May, 2023 Programación

Implementé un temporizador que funciona bien, pero el único problema es que no clearInterval cuando el temporizador finaliza.

Mi código se ve así:

const [currentCount, setCurrentCount] = React.useState(10);
const [intervalId, setIntervalId] = React.useState(10);

React.useEffect(() => {
  const intervalId = setInterval(timer, 1000);
  // almacenar intervalId en el estado para acceder a él más tarde:
  setIntervalId(intervalId);
  return () => {
    clearInterval(intervalId);
  };
}, []);

const timer = () => {
  setCurrentCount((prev) => {
    if (prev > 0) {
      return prev - 1;
    } else if (prev === 0) {
      console.log("Still Runs");
      clearInterval(intervalId);
      return prev;
    }
  });
};

El valor de currentCount disminuye de 10 a 0, pero quiero borrar el intervalo cuando llegue a 0 e intenté borrarlo con este fragmento de código clearInterval(intervalId), pero no funcionó.

¿Cómo puedo clearInterval cuando el valor de currentCount llega a 0?

Tags:  , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    El problema es que el estado intervalId se está estableciendo incorrectamente en el valor inicial de 10 en lugar del valor de retorno de setInterval. Para solucionar esto, cambie el estado inicial de intervalId a null y actualice el estado al valor de retorno de setInterval en el useEffect hook:

    const [currentCount, setCurrentCount] = React.useState(10);
const [intervalId, setIntervalId] = React.useState(null);

React.useEffect(() => {
  const id = setInterval(timer, 1000);
  setIntervalId(id);
  return () => clearInterval(id);
}, []);

const timer = () => {
  setCurrentCount((prev) => {
    if (prev > 0) {
      return prev - 1;
    } else {
      clearInterval(intervalId);
      return prev;
    }
  });
};

    Esto asegura que intervalId esté siempre actualizado y se pueda pasar correctamente a clearInterval cuando el temporizador llegue a 0.

Comments are closed.