Egy egyszerű visszaszámláló elkészítése egyszerű a JavaScript natív időzítési eseményeivel. A cikkben olvashat bővebben ezekről.
A visszaszámláló kiépítése
Kezdje egy üres függvény deklarálásával , amelyet argumentumként startCountdownvesz secondsfel:
function startCountdown(seconds) { };Szeretnénk nyomon követni az időzítő elindítása után eltelt másodperceket, ezért használja leta deklarálandó változó deklarálására, counterés állítsa egyenlőre seconds:
function startCountdown(seconds) { let counter = seconds; }Ne feledje, hogy a legjobb gyakorlat, ha az időzítési esemény függvényét egy változóba menti. Ez sokkal könnyebbé teszi az időzítő későbbi leállítását. Hozzon létre egy nevű változót, intervalés állítsa egyenlőre setInterval():
function startCountdown(seconds) { let counter = seconds; const interval = setInterval(); }Közvetlenül átadhat egy függvényt setInterval, így adjunk át neki egy üres nyílfüggvényt első argumentumként. Azt is szeretnénk, hogy a függvény minden másodpercben fusson, ezért adja át az 1000-et második argumentumként:
function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { }, 1000); }Most setIntervalminden másodpercben futni fog az a funkció, amelyre átmentünk . Minden alkalommal, amikor fut, be akarjuk counterjegyezni a konzol aktuális értékét, mielőtt csökkentenénk:
function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; }, 1000); }Most, ha futtatja a függvényt, látni fogja, hogy működik, de nem áll le egyszer counter, kevesebb, mint 0:
startCountdown(5); // Console Output // // 5 // 4 // 3 // 2 // 1 // 0 // -1 // -2 Ennek kijavításához először írjon egy olyan ifnyilatkozatot, amely akkor teljesül, ha counter0-nál kisebb:
function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; if (counter < 0 ) { } }, 1000); }Ezután iftörölje az utasítás belsejében a intervalwith clearIntervalelemet , és naplózza a riasztás hangját a konzolon:
function startCountdown(seconds) { let counter = seconds; const interval = setInterval(() => { console.log(counter); counter--; if (counter < 0 ) { clearInterval(interval); console.log('Ding!'); } }, 1000); }Végrehajtás
Az időzítő elindításakor a következőket kell látnia:
startCountdown(5); // Console Output // // 5 // 4 // 3 // 2 // 1 // 0 // Ding!További források
JavaScript Időzítési események: setTimeout és setInterval