Simple Countdown Timer Typescript

给你一囗甜甜゛ 提交于 2019-12-13 16:14:38

问题


I have the following code in my constructor:

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

What I actually want is to display a number which counts down 90 seconds. Right now it counts down from 90 to 0 immediately


回答1:


You can use setInterval instead to make the function be called every 1 second until the counter reaches 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)
    }
}

Or if you want something that looks like a for and uses setTimeout you could use async/await and Promisses (admittedly this might be overkill for this simple example):

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


来源:https://stackoverflow.com/questions/51618496/simple-countdown-timer-typescript

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!