settimeout - Enkel nedtellingstimer Typescript

Jeg har følgende kode i konstruktøren min:

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

Det jeg egentlig vil er å vise et tall som teller ned 90 sekunder. Akkurat nå teller det ned fra 90 til 0 umiddelbart

Svar #1

Du kan bruke setInterval i stedet for å få funksjonen til å bli kalt hvert 1. sekund til telleren når 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)
    }
}

Eller hvis du vil ha noe som ser ut som en for og bruker setTimeout, kan du bruke async/await og Promises (innrømmet, dette kan være overdrevet for dette enkle eksemplet):

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

Svar #2

En annen løsning jeg fant :

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

Og i din html:

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

Relaterte artikler