Izgradnja jednostavnog odbrojavanja vremena jednostavna je s JavaScript izvornim vremenskim događajima. O njima možete pročitati više u ovom članku.
Izrada odbrojavanja
Počnite objavljujući praznu funkciju pod nazivom startCountdownkoji uzima secondskao argument:
function startCountdown(seconds) { };Želimo pratiti sekunde koje prolaze nakon pokretanja odbrojavanja, pa upotrijebite letza deklariranje pozvane varijable counteri postavite je jednakom seconds:
function startCountdown(seconds) { let counter = seconds; }Imajte na umu da je najbolja praksa spremanje funkcije vremenskog događaja u varijablu. To znatno olakšava zaustavljanje odbrojavanja kasnije. Stvorite varijablu koja se zove intervali postavite je jednakom setInterval():
function startCountdown(seconds) { let counter = seconds; const interval = setInterval(); }Možete proslijediti funkciju izravno setInterval, pa joj proslijedimo praznu funkciju strelice kao prvi argument. Također, želimo da se funkcija izvodi svake sekunde, zato dodajte 1000 kao drugi argument:
function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { }, 1000); }Sada će se funkcija kojoj smo prešli setIntervalizvoditi svake sekunde. Svaki put kad se pokrene, želimo prijaviti trenutnu vrijednost counterkonzole prije deinkrementiranja:
function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; }, 1000); }Sada ako pokrenete funkciju, vidjet ćete da radi, ali ne zaustavi counterse niže nego što je manje od 0:
startCountdown(5); // Console Output // // 5 // 4 // 3 // 2 // 1 // 0 // -1 // -2 Da biste to popravili, prvo napišite ifizjavu koja se izvršava kada counterje manje od 0:
function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; if (counter < 0 ) { } }, 1000); }Zatim unutar ifizjave izbrišite intervals clearIntervali prijavite zvučni niz alarma na konzolu:
function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; if (counter < 0 ) { clearInterval(interval); console.log('Ding!'); } }, 1000); }Izvršenje
Sada kada pokrenete timer, trebali biste vidjeti sljedeće:
startCountdown(5); // Console Output // // 5 // 4 // 3 // 2 // 1 // 0 // Ding!Više resursa
JavaScript vremenski događaji: setTimeout i setInterval