Question 244570 in Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Clearing Timeouts loop in React using useEffect hook

I have the following code in Javacript (React):

useEffect(() => {
    const timer1 = setTimeout(() => {
      // task 1
    }, 1000)

    const timer2 = setTimeout(() => {
      // task 2
    }, 2000)

    const timer3 = setTimeout(() => {
      // task 3
    }, 3000)

    // returns to the first task and starts all over again

    return () => {
      clearTimeout(timer1)
      clearTimeout(timer2)
      clearTimeout(timer3)
    }
  }, [])

my question is: how to make it so that as soon as all the timeouts are executed until the last one, I call them to be executed all over again? I simply need to run this sequence of timeouts multiple times.
I tried to throw all the setTimeouts in a function and call them in the useEffect, but I can’t clear the timeouts correctly inside the hook.

Flow example:

  • 1 second later: timer1 executes task 1
  • +1 second later: timer2 runs task 2
  • +1 second later: timer3 runs task 3
  • restarts the flow from the beginning, from timer1.
Tags:

3

Answers


  1. 0

    You can clear the interval duration once the 3rd timeout completes it’s cycle.

    For ex:

    useEffect(() => {
  const intervalDuration = 3000;     
  const interval = setInterval(() => {
    setTimeout(() => {
      // task 1 logic here
    }, 1000);

    setTimeout(() => {
      // task 2
    }, 2000);

    setTimeout(() => {
      // task 3
    }, 3000);
  }, intervalDuration);

  return () => {
    clearInterval(interval);
  };
}, []);
    Login or Signup to reply.
  2. 0

    Let me give you an idea. All you need is to re-run the useEffect once your last timer is completed.

    You can have a state which can be modified at last and pass it as dependency to the useEffect.

    const [timerCount, setTimerCount] = useState(0);

useEffect(() => {
    console.log("Starting new set of timers");
    const timer1 = setTimeout(() => {
        // task 1
        console.log("Task 1");
    }, 1000);

    const timer2 = setTimeout(() => {
        // task 2
        console.log("Task 2");
    }, 2000);

    const timer3 = setTimeout(() => {
        // task 3
        console.log("Task 3");

        setTimerCount((prev) => prev + 1);
    }, 3000);

    return () => {
        console.log("Killing all timers");
        clearTimeout(timer1);
        clearTimeout(timer2);
        clearTimeout(timer3);
    };
}, [timerCount]);
    Login or Signup to reply.
  3. 0

    You can use setInterval() method to create a sort of loop. It would look like this:

      useEffect(() => {
  
        //Implementing the setInterval method. I put a delay of 8 seconds to 
        //make sure all your tasks run to completion, but you can play with 
        //it
        const interval = setInterval(() => {
            const timer1 = setTimeout(() => {
              // task 1
            }, 1000)

            const timer2 = setTimeout(() => {
              // task 2
            }, 2000)

            const timer3 = setTimeout(() => {
              // task 3
            }, 3000)

            
        }, 8000);
  
        //Clearing the interval
        return () => {
            clearInterval(interval);
            
        }
    }, []);
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search