Sådan oprettes en nedtællingstimer

Opbygning af en simpel nedtællingstimer er let med JavaScript's native timing-begivenheder. Du kan læse mere om dem i denne artikel.

Opbygning af nedtællingstimeren

Start med at erklære en tom funktion kaldet, startCountdownder tager secondssom et argument:

function startCountdown(seconds) { };

Vi vil holde styr på de sekunder, der går, når timeren er startet, så brug lettil at erklære en variabel kaldet counterog indstille den til seconds:

function startCountdown(seconds) { let counter = seconds; }

Husk, at det er den bedste praksis at gemme din tidsbegivenhedsfunktion til en variabel. Dette gør det meget nemmere at stoppe timeren senere. Opret en kaldet variabel, intervalog indstil den lig med setInterval():

function startCountdown(seconds) { let counter = seconds; const interval = setInterval(); }

Du kan videregive en funktion direkte til setInterval, så lad os give den en tom pilfunktion som det første argument. Vi ønsker også, at funktionen skal køre hvert sekund, så send 1000 som det andet argument:

function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { }, 1000); }

Nu setIntervalkører den funktion, vi gik til , hvert sekund. Hver gang det kører, vil vi logge den aktuelle værdi af countertil konsollen, før deincrementering af den:

function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; }, 1000); }

Hvis du nu kører funktionen, ser du, at den fungerer, men ikke stopper en gang, counterer mindre end 0:

startCountdown(5); // Console Output // // 5 // 4 // 3 // 2 // 1 // 0 // -1 // -2 

For at løse dette skal du først skrive en iferklæring, der udføres, når den counterer mindre end 0:

function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; if (counter < 0 ) { } }, 1000); }

ifRyd derefter intervalmed clearIntervalog log en alarmlydstreng til konsollen inde i erklæringen :

function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; if (counter < 0 ) { clearInterval(interval); console.log('Ding!'); } }, 1000); }

Udførelse

Nu når du starter timeren, skal du se følgende:

startCountdown(5); // Console Output // // 5 // 4 // 3 // 2 // 1 // 0 // Ding!

Flere ressourcer

JavaScript-tidsbegivenheder: setTimeout og setInterval