简单的倒数计时器打字稿

Nic*_* W. 9 settimeout countdown typescript

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

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

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

Tit*_*mir 15

您可以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)
    }
}
Run Code Online (Sandbox Code Playgroud)

或者,如果你想要的东西,看起来像一个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);
        }
    }
}
Run Code Online (Sandbox Code Playgroud)