不能停止间隔

Question

我有一个使用 setTimeout 每秒更新时间的状态，但我无法使用 ClearTimeout 清除它。当我打印 timerClear 值时，它显示不同的值。

var timerClear ;

const [MyTime, setMyTime] = useState('');

useEffect(() => {
  timerClear = setInterval(() => {
     setMyTime(
       realeTime.toLocaleTimeString([], {
       timeZone: "Asia/Tehran",
       hour: '2-digit',
       minute: '2-digit',
       second: '2-digit',
       hour12: false,
       }),
     );

     checkTime();

  }, 1000);
}, [MyTime]);

在check函数中，如果时间达到了想要的值，我就清空所有的定时器

if (filterGetTime > filterEndTime) {
   if (data.examParents[0].examParent_method == "0") { 
      console.log('timerClear',timerClear);
                    
      alert('زمان امتحان تمام شده است!!!');
      if(sendReqDelay){
         clearTimeout(sendReqDelay);
      }
      clearTimeout(setTimeToPageTimeOut);
      clearTimeout(TimerIntervalSolveQuestions);
      clearInterval(timerClear);
   } 
             
}

每次在 Alert 中确认按钮后

alert('زمان امتحان تمام شده است!!!');

console.log('timerClear',timerClear);

打印另一个数字。

Answer 1

由于依赖数组 [MyTime] 每次 MyTime 更改，您正在创建一个新的间隔，并且对旧间隔的引用丢失。有了这样的设置，你最好使用 setTimeout.

此外，由于您有一个普通变量，它会在每次重新渲染时重新声明。
如果你打算使用 setInterval 你应该使用 useRef 来保持对它的引用并从依赖数组中删除 MyTime。

大致如下：

const timerClear = useRef() ;
const [myTime, setMyTime] = useState('');

useEffect(() => {
  timerClear.current = setInterval(() => {
     setMyTime(
        // ...
     );
  }, 1000);
  return () => clearInterval(timeClear.current);
}, []);

不能停止间隔

can not stop interval

javascript

reactjs

state

settimeout

cleartimeout