Javascript 在渲染时不更新暂停/恢复计数器的setTimout

我想设置一个计数器，它可以在React.js中暂停和恢复。但到目前为止，我所尝试的都是工作的功能部分（暂停/恢复工作），但它并没有在渲染时更新计数器。下面是我的代码：

constprogressbar=（道具）=>{
const[isPlay，setisPlay]=使用状态（false）；
常量[progressText，setProgressText]=useState(
道具持续时间？道具持续时间：20
);
已经过去了，
第二个sleft=20；
常量计时器=（）=>{
//设置每秒钟的间隔
变量倒计时=设置间隔（（）=>{
//如果允许的时间已用完，请清除间隔
如果（秒英尺<0）{
清除间隔（倒计时）；
返回；
}
//如果暂停，记录经过的时间并返回
如果（isPlay==true）{
已用=秒/英尺；
返回；
}
//剩余秒数递减
第二步--；
控制台。警告（第二个SLEFT）；
}, 1000);
};
定时器（）；
常数stopProgress=（）=>{
setisPlay（！isPlay）；
如果（isPlay==false）{
secondsLeft=已过；
}
};
返回(
{secondsLeft}

);
};
导出默认进度条；

---

到目前为止，我已经尝试了React.js state、global var type、global let type、React ref使变量成为全局变量，但它们都不起作用。

那么基本上为什么您的示例不起作用呢？ 第二个SLEFT变量未连接到JSX。因此，每次组件重新渲染时，它都会创建一个值为20的新secondsLeft变量（因为重新渲染只是执行返回JSX的函数） 如何使您的变量值持久化-或为react函数组件钩住，或为基于类的组件钩住状态。因此，react将为您存储下一个重新加载循环的所有值。 第二个问题是React不会重新启动组件，它只是不知道什么时候应该重新启动。那么，是什么原因导致您的组件重新招标-

• 道具改变
• 状态变化
• 语境变化
• 从DOM中添加/删除组件
• 也许我错过了其他一些案子

所以下面的例子对我来说很好

import { useEffect, useState } from "react";

function App() {
  const [pause, setPause] = useState(false);
  const [secondsLeft, setSecondsLeft] = useState(20);

  const timer = () => {
    var countdown = setInterval(() => {
      if (secondsLeft <= 0) {
        clearInterval(countdown);
        return;
      }

      if (pause === true) {
        clearInterval(countdown);
        return;
      }

      setSecondsLeft((sec) => sec - 1);
    }, 1000);
    return () => {
      clearInterval(countdown);
    };
  };
  useEffect(timer, [secondsLeft, pause]);

  const pauseTimer = () => {
    setPause((pause) => !pause);
  };

  return (
    <div>
      <span>Seconds Left</span>
      <p>{secondsLeft}</p>
      <button onClick={pauseTimer}>{pause ? "Start" : "Pause"}</button>
    </div>
  );
}

从“react”导入{useffect，useState}；
函数App（）{
const[pause，setPause]=useState（false）；
const[secondsLeft，setSecondsLeft]=使用状态（20）；
常量计时器=（）=>{
变量倒计时=设置间隔（（）=>{
如果（第二节第1节）；
}, 1000);
return（）=>{
清除间隔（倒计时）；
};
};
useffect（计时器，[secondsLeft，pause]）；
常数pauseTimer=（）=>{
设置暂停（（暂停）=>！暂停）；
};
返回(
还剩几秒钟
{secondsLeft}

{暂停？“开始”：“暂停”}
);
}

那么基本上为什么您的示例不起作用呢？ 第二个SLEFT变量未连接到JSX。因此，每次组件重新渲染时，它都会创建一个值为20的新secondsLeft变量（因为重新渲染只是执行返回JSX的函数） 如何使您的变量值持久化-或为react函数组件钩住，或为基于类的组件钩住状态。因此，react将为您存储下一个重新加载循环的所有值。 第二个问题是React不会重新启动组件，它只是不知道什么时候应该重新启动。那么，是什么原因导致您的组件重新招标-

• 道具改变
• 状态变化
• 语境变化
• 从DOM中添加/删除组件
• 也许我错过了其他一些案子

所以下面的例子对我来说很好

import { useEffect, useState } from "react";

function App() {
  const [pause, setPause] = useState(false);
  const [secondsLeft, setSecondsLeft] = useState(20);

  const timer = () => {
    var countdown = setInterval(() => {
      if (secondsLeft <= 0) {
        clearInterval(countdown);
        return;
      }

      if (pause === true) {
        clearInterval(countdown);
        return;
      }

      setSecondsLeft((sec) => sec - 1);
    }, 1000);
    return () => {
      clearInterval(countdown);
    };
  };
  useEffect(timer, [secondsLeft, pause]);

  const pauseTimer = () => {
    setPause((pause) => !pause);
  };

  return (
    <div>
      <span>Seconds Left</span>
      <p>{secondsLeft}</p>
      <button onClick={pauseTimer}>{pause ? "Start" : "Pause"}</button>
    </div>
  );
}

从“react”导入{useffect，useState}；
函数App（）{
const[pause，setPause]=useState（false）；
const[secondsLeft，setSecondsLeft]=使用状态（20）；
常量计时器=（）=>{
变量倒计时=设置间隔（（）=>{
如果（第二节第1节）；
}, 1000);
return（）=>{
清除间隔（倒计时）；
};
};
useffect（计时器，[secondsLeft，pause]）；
常数pauseTimer=（）=>{
设置暂停（（暂停）=>！暂停）；
};
返回(
还剩几秒钟
{secondsLeft}

{暂停？“开始”：“暂停”}
);
}

导入React，{useState，useffect}来自“React”；
从“/logo.svg”导入徽标；
导入“/App.css”；
var定时器=null；
函数App（）{
const[counter，setCounter]=useState（0）；
const[isplayin，setisplayin]=使用状态（false）；
常数暂停=（）=>{
设置显示（假）；
清除间隔（计时器）；
};
常数重置=（）=>{
设置显示（假）；
设置计数器（0）；
清除间隔（计时器）；
};
常量播放=（）=>{
设置显示（真）；
计时器=设置间隔（（）=>{
setCounter（（prev）=>prev+1）；
}, 1000);
};
返回(
柜台

{计数器}
{isplayin(
pause（）}>暂停
reset（）}>reset
) : (
{计数器>0(
播放（）}>继续
reset（）}>reset
) : (
play（）}>开始
)}
)}
);
}
导出默认应用程序；

导入React，{useState，useffect}来自“React”；
从“/logo.svg”导入徽标；
导入“/App.css”；
var定时器=null；
函数App（）{
const[counter，setCounter]=useState（0）；
const[isplayin，setisplayin]=使用状态（false）；
常数暂停=（）=>{
设置显示（假）；
清除间隔（计时器）；
};
常数重置=（）=>{
设置显示（假）；
设置计数器（0）；
清除间隔（计时器）；
};
常量播放=（）=>{
设置显示（真）；
计时器=设置间隔（（）=>{
setCounter（（prev）=>prev+1）；
}, 1000);
};
返回(
柜台

{计数器}
{isplayin(
pause（）}>暂停
reset（）}>reset
) : (
{计数器>0(
播放（）}>继续
reset（）}>reset
) : (
play（）}>开始
)}
)}