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, startCountdown
der tager seconds
som et argument:
function startCountdown(seconds) { };
Vi vil holde styr på de sekunder, der går, når timeren er startet, så brug let
til at erklære en variabel kaldet counter
og 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, interval
og 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 setInterval
kører den funktion, vi gik til , hvert sekund. Hver gang det kører, vil vi logge den aktuelle værdi af counter
til 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, counter
er 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 if
erklæring, der udføres, når den counter
er mindre end 0:
function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; if (counter < 0 ) { } }, 1000); }
if
Ryd derefter interval
med clearInterval
og 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