Hogyan készítsünk visszaszámlálót

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