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.

Diferentes intervalos para setTimeout en useEffect.

30 Jul, 2023 Programación

Estoy tratando de lograr una situación en la que una función dentro de setTimeout se ejecute después de X segundos por primera vez, y luego regularmente a intervalos de Y.

    useEffect(() => {
    let firstTime = true;
    const timer = setTimeout(() => {
      getValue(id).then((res) => {
        setValue(res);
      });
      if (firstTime) {
        firstTime = false;
      }
    }, firstTime ? 30000 : 60000);
    return () => clearTimeout(timer);
  }, [])

Sin embargo, esto no funciona, ya que establece firstTime en falso antes de ejecutar la función. ¿Existe alguna manera de lograr el resultado de manera elegante? ¿Es posible incluso con setTimeout?

Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Sí, es posible lograr el resultado deseado utilizando setTimeout. Un enfoque sería tener dos invocaciones separadas de setTimeout, una para la ejecución inicial con un retraso más largo, y otra para ejecuciones posteriores con un retraso más corto.

    Aquí tienes un ejemplo de implementación:

    useEffect(() => {
  const initialDelay = 30000; // X segundos
  const regularDelay = 60000; // Y intervalo
  let isFirstTime = true;

  const executeFunction = () => {
    getValue(id).then((res) => {
      setValue(res);
    });

    if (isFirstTime) {
      isFirstTime = false;
      setTimeout(executeFunction, regularDelay);
    } else {
      setTimeout(executeFunction, regularDelay);
    }
  };

  const timer = setTimeout(executeFunction, initialDelay);

  return () => clearTimeout(timer);
}, []);

    En esta implementación, inicialmente establecemos isFirstTime en true y utilizamos un retraso más largo (initialDelay) para la ejecución inicial. Una vez que la función se ejecuta por primera vez, establecemos isFirstTime en false y programamos que la misma función se ejecute nuevamente con un retraso más corto (regularDelay). La función setTimeout devuelve un ID de temporizador, que utilizamos para cancelar el tiempo de espera cuando el componente se desmonta.

    Ten en cuenta que hemos definido la función executeFunction como una función separada para que el código sea más legible; esta función es llamada por ambas invocaciones de setTimeout. También puedes incluir la función directamente en las llamadas de setTimeout si lo prefieres.

Comments are closed.