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

Javascript – interval dont attach after got cleared by condtion

i have a slider with a play button witch change the slide image and there is a pause btn
when click play it do as i intended and when i pause it work fine but when i try to play again it dont work there is no interval after clearing it by pause btn but still i dont attach a new interval (btw logic behind increment is find i just paste part of code i am the problem is there there is previous and next btn which working fine but i cant replay after pause


const Controls = ({ setSlideIndex }) => {
  const interval = useRef();
  const COUNTER = 1000;


  const incrementSlide = () => {
    setSlideIndex((currIndex) => {
      return currIndex + 1 > 2 ? 0 : currIndex + 1;
    });
  };
  

  return (
    <div className="control-container">
      <button
        onClick={() => {
          if (!interval.current) {
            interval.current = setInterval(() => incrementSlide(), COUNTER);
          }
        }}>Play</button>

      <button
        onClick={() => clearInterval(interval.current)}>Pause</button>
    </div>
  );
};

export default Controls;
Tags:

2

Answers


  1. 0

    Restarting setInterval with useRef in React

    The issue in the code arises because after clearing the interval using the "Pause" button, the interval.current isn’t reset to null. As a result, when pressing the "Play" button again, the if (!interval.current) condition fails to pass due to the persisted interval id, preventing the setup of a new interval.

    The fixed Code:

    const Controls = ({ setSlideIndex }) => {
  const interval = useRef(null);
  const COUNTER = 1000;

  const incrementSlide = () => {
    setSlideIndex((currIndex) => {
      return currIndex + 1 > 2 ? 0 : currIndex + 1;
    });
  };

  const startSlideShow = () => {
    if (!interval.current) {
      interval.current = setInterval(() => incrementSlide(), COUNTER);
    }
  };

  const stopSlideShow = () => {
    if (interval.current) {
      clearInterval(interval.current);
      interval.current = null;
    }
  };

  return (
    <div className="control-container">
      <button onClick={startSlideShow}>Play</button>
      <button onClick={stopSlideShow}>Pause</button>
    </div>
  );
};

export default Controls;

    When we set interval.current to null after clearing the interval, it makes sure that the "Play" button’s condition becomes true. This, in turn, lets us create a new interval when we click the button again after pausing.

    Login or Signup to reply.
  2. 0

    After you pause the interval using clearInterval(interval.current), you should also set interval.current to null. This ensures that when you try to play again, the code correctly recognizes that there’s no active interval, allowing it to start a new one.

    const Controls = ({ setSlideIndex }) => {
  const interval = useRef(null); // Initialize interval as null

  const COUNTER = 1000;

  const incrementSlide = () => {
    setSlideIndex((currIndex) => {
      return currIndex + 1 > 2 ? 0 : currIndex + 1;
    });
  };

  return (
    <div className="control-container">
      <button
        onClick={() => {
          if (!interval.current) {
            interval.current = setInterval(() => incrementSlide(), COUNTER);
          }
        }}
      >Play</button>

      <button
        onClick={() => {
          // Clear the interval and set interval.current back to null
          clearInterval(interval.current);
          interval.current = null;
        }}
      >Pause</button>
    </div>
  );
};

export default Controls;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search