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

Question

I am trying to build a countdown timer, which works like this:

const startCountdown = async () => {

   var countdownTime = 10;
   setDisplayTime(countdownTime);

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

   }
}

As you can see, this counts down from 10 (which will be a user input later on).

The sleep function looks like this:

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

The issue is that I want the user to be able to stop the timer. I initially thought that it would work like this:

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);

   }
}

But it doesn't look like the new state is passed into the for loop, it just remembers what the state was when the function started.

Is there a way to work around this? I don't need the timer to be paused and restarted, I just need it to stop (and then I can reset it from there).

Answer 1

I built a rxjs version for you... I find this solution somewhat easier, because of the ability to manipulate streams.

 const { BehaviorSubject, timer } = rxjs const { filter, tap, withLatestFrom } = rxjs.operators; const startButton = document.getElementById("startButton"), pauseButton = document.getElementById("pauseButton"), continueButton = document.getElementById("continueButton"), stopButton = document.getElementById("stopButton"); class Timer { _time = 0; _timerSubscription; _paused = new BehaviorSubject(false); setTime(time) { this._time = time } start() { const step = 1000; this._timerSubscription = timer(0, step).pipe(withLatestFrom(this._paused), filter(([v, paused]) => !paused)).subscribe(val => { if (this._time <= 0) { this.stop(); } console.log(this._time); this._time -= step; }); } pause() { this._paused.next(true) } continue () { this._paused.next(false) } stop() { this.reset(); if (this._timerSubscription) { this._timerSubscription.unsubscribe(); } } reset() { this._time = 0; } } const myTimer = new Timer(); myTimer.setTime(10000); startButton.onclick = () => { myTimer.start(); }; pauseButton.onclick = () => { myTimer.pause(); } stopButton.onclick = () => { myTimer.stop(); } continueButton.onclick = () => { myTimer.continue(); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/6.6.2/rxjs.umd.min.js"></script> <button id="startButton">Start</button> <button id="stopButton">Stop</button> <button id="pauseButton">Pause</button> <button id="continueButton">Continue</button>