简单的倒数计时器打字稿

Question

我的构造函数中有以下代码：

constructor(){
for (let i = 0; i < 90; i++) {
  setTimeout(() => {
    this.counter = this.counter - 1;
  }, 1000)
 }
}

我真正想要的是显示一个倒计时 90 秒的数字。现在它立即从 90 倒数到 0

Answer 1

您可以使用 setInterval 来使函数每 1 秒调用一次，直到计数器达到 0：

class Timer {
    constructor(public counter = 90) {

        let intervalId = setInterval(() => {
            this.counter = this.counter - 1;
            console.log(this.counter)
            if(this.counter === 0) clearInterval(intervalId)
        }, 1000)
    }
}

或者，如果你想要看起来像 for 的东西并使用 setTimeout，你可以使用 async/await 和 Promisses（诚然，对于这个简单的例子来说，这可能有点矫枉过正）：

function delay(delay: number) {
    return new Promise(r => {
        setTimeout(r, delay);
    })
}
class Timer {
    constructor(public counter = 90) {
        this.doTimer();
    }
    async doTimer() {
        for (let i = 0; i < this.counter; i++) {
            await delay(1000);
            this.counter = this.counter - 1;
            console.log(this.counter);
        }
    }
}

Answer 2

我找到的另一个解决方案：

counter: { min: number, sec: number }

  startTimer() {
    this.counter = { min: 30, sec: 0 } // choose whatever you want
    let intervalId = setInterval(() => {
      if (this.counter.sec - 1 == -1) {
        this.counter.min -= 1;
        this.counter.sec = 59
      } 
      else this.counter.sec -= 1
      if (this.counter.min === 0 && this.counter.sec == 0) clearInterval(intervalId)
    }, 1000)
  }

在你的 html 中：

<span>{{counter.min}} : {{counter.sec}}</span>

Answer 3

这是我的解决方案：

// You can set binding in your templeteurl with this variable that will display the time couner
// for example <span id='myTimeCounter'>{{expirationCounter}}</span>
expirationCounter: string;
startTimer(secsToStart:number): void {
    var start: number = secsToStart;
    var h: number;
    var m: number;
    var s: number;
    var temp: number;
    var timer: any = setInterval(() =>
    {
        h = Math.floor(start / 60 / 60)
        // remove the hours
        temp = start - h * 60 * 60;
        m = Math.floor(temp / 60);
        // remove the minuets
        temp = temp - m * 60;
        // what left is the seconds
        s = temp;

        // add leading zeros for aesthetics
        var hour = h < 10 ? "0" + h : h;
        var minute = m < 10 ? "0" + m : m;
        var second = s < 10 ? "0" + s : s;

        this.expirationCounter = hour + ":" + minute + ":" + second;

        if (start <= 0) {
            // Time elapsed
            clearInterval(timer);
            this.expirationCounter = "Expired";
            // Make here changes in gui when time elapsed
            //....
        }
        start--;
    }, 1000)
}

Answer 4

使用 setInterval() 函数还可以按降序显示 10s、9s、8s...

timeLeft: any = 10;

 startTimer() {
    setInterval(() => {
      if (this.timeLeft > 1) {
        this.timeLeft--;
      } else {
        this.timeLeft = 10;
      }
    }, 1000);
  }

简单的倒数计时器打字稿

Simple Countdown Timer Typescript

typescript

settimeout

countdown