Question 281984 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Restart useInterval delay after button is clicked

I am using useInterval in order to automatically pass pictures every 5 seconds, and I would like to know if there is a way to reset the delay when the "next" button is clicked. For instance, if I click the button after 3 seconds to pass to the second picture, then the third picture is passing to the next one after the remaining 2 seconds. The behavior that I would want is if I pass to the second picture by clicking on the button after, e.g. 3 seconds, the delay will restart to 5 seconds again.

This is a summary of my code:

const currentSlide = signal(0);
const intervalTime = 5000;

    function nextSlide() {
        if (currentSlide.value === slideLength-1) {
            return currentSlide.value = 0
        }
        else {
            return currentSlide.value++;
        }
    };

useInterval(() => { 
            nextSlide();
    }, intervalTime);

It is very similar to what I found in this post, however, Jacki didn’t post the solution.

Thanks in advance.

Tags:

2

Answers


  1. 0

    You can try this.

    const currentSlide = signal(0);
const intervalTime = 5000;

function nextSlide() {
    if (currentSlide.value === slideLength-1) {
        return currentSlide.value = 0
    }
    else {
        return currentSlide.value++;
    }
    intervalTime = 5000; //to reset time after go next
};

useInterval(() => { 
      nextSlide();
}, intervalTime);
    Login or Signup to reply.
  2. 0

    Answering..

    in this example(codesandbox.io/..) You will notice that if you increase the delay to e.g. 5000, and hit the restart button after 3s, you will notice the counter changes in less than 5s.

    You need to add a new state variable in your Ticker to control the delay. You should modify the useInterval to accept a delay that can be changed dynamically. This will allow you to adjust the delay based on certain conditions. Next, you need to adjust the delay based on the tick. If tick is greater than 540 and less than 900, you should set the delay example 5000(or 5 seconds). You can do this inside a useEffect that depends on the tick. Lastly, you need to reset the tick and the delay example 1000(or 1 second) when the warning or error message is clicked. You can do this inside the reset function.

    Modified Ticker;

    function Ticker({ onError }) {
 const [tick, setTick] = useState(0);
 const [delay, setDelay] = useState(1000);

 function reset() {
   setTick(0);
   setDelay(1000);
 }

 useEffect(() => {
   if (tick > 540 && tick < 900) {
     setDelay(5000);
   } else {
     setDelay(1000);
   }
 }, [tick]);

 useInterval(() => {
   console.log("useInterval");
   if (tick === -1) return;
   setTick(tick + 60);
 }, delay);

 if (tick >= 900) {
   onError();
 }

 return (
   <div>
     {tick > 540 && (
       <TickerAlert color="orange" message="Warning!" onClick={reset} />
     )}
     <b>{tick}</b>
   </div>
 );
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search