Javascript 如何在JS for循环中检测状态变化？

我正在尝试构建一个倒计时计时器，其工作原理如下：

const startCountdown = async () => {

   var countdownTime = 10;
   setDisplayTime(countdownTime);

   for (let i = 0; i < 10; i++) {
       
      await sleep(1000);
      countdownTime = countdownTime - 1;
      setDisplayTime(countdownTime);

   }
}

const sleep = (ms) => {
    return new Promise((resolve) => setTimeout(resolve, ms));
};

const startCountdown = async () => {

   var countdownTime = 10;
   setDisplayTime(countdownTime);

   for (let i = 0; i < 10; i++) {

      if (timerStopped) {
         
         break;
      
      } else {
       
         await sleep(1000);
         countdownTime = countdownTime - 1;
         setDisplayTime(countdownTime);

   }
}

问题是我希望用户能够停止计时器。我最初认为它会这样工作：

const startCountdown = async () => {

   var countdownTime = 10;
   setDisplayTime(countdownTime);

   for (let i = 0; i < 10; i++) {
       
      await sleep(1000);
      countdownTime = countdownTime - 1;
      setDisplayTime(countdownTime);

   }
}

const sleep = (ms) => {
    return new Promise((resolve) => setTimeout(resolve, ms));
};

const startCountdown = async () => {

   var countdownTime = 10;
   setDisplayTime(countdownTime);

   for (let i = 0; i < 10; i++) {

      if (timerStopped) {
         
         break;
      
      } else {
       
         await sleep(1000);
         countdownTime = countdownTime - 1;
         setDisplayTime(countdownTime);

   }
}

const startCountdown=async（）=>{
var=10；
设置显示时间（countdownTime）；
for（设i=0；i<10；i++）{
如果（计时器停止）{
打破
}否则{
等待睡眠（1000）；
countdownTime=countdownTime-1；
设置显示时间（countdownTime）；
}
}

但新状态看起来并没有传递到for循环中，它只记得函数启动时的状态

---

有办法解决这个问题吗？我不需要暂停和重新启动计时器，我只需要它停止（然后我就可以从那里重置它）。

我为您构建了一个rxjs版本……我发现这个解决方案更容易一些，因为它能够操作流

const{
行为主体，
计时器
}=rxjs
常数{
过滤器，
水龙头
最晚从
}=rxjs.运算符；
常数
startButton=document.getElementById（“startButton”），
pauseButton=document.getElementById（“pauseButton”），
continueButton=document.getElementById（“continueButton”），
stopButton=document.getElementById（“stopButton”）；
班级计时器{
_时间=0；
_时间订阅；
_暂停=新行为主体（false）；
设定时间（时间）{
这个时间=时间
}
开始（）{
常数步长=1000；
this._timerSubscription=timer（0，步骤）.pipe（withLatestFrom（this._暂停），filter（[v，暂停]=>！暂停））。订阅（val=>{
如果（这一次）{
myTimer.start（）；
};
pauseButton.onclick=（）=>{
myTimer.pause（）；
}
stopButton.onclick=（）=>{
myTimer.stop（）；
}
continueButton.onclick=（）=>{
myTimer.continue（）；
}

开始
停止
暂停
继续

非常感谢。这对React-Native有效吗？需要检查一下。它应该…我见过有人一起使用React-Native和rxjs:）不幸的是没有。我仍在处理它，但此代码：pause（）{this.\u pause.next（true）}没有更改withLatestFrom（）中的变量不管发生什么，它都是假的。