JavaScript-tidshändelser: setTimeout och setInterval

Programmerare använder tidshändelser för att fördröja exekveringen av viss kod eller för att upprepa koden vid ett visst intervall.

Det finns två inbyggda funktioner i JavaScript-biblioteket som används för att utföra dessa uppgifter: setTimeout()och setInterval().

setTimeout

setTimeout() används för att fördröja körningen av den godkända funktionen med en viss tid.

Det finns två parametrar som du skickar till setTimeout(): den funktion du vill ringa upp och tiden i millisekunder för att fördröja utförandet av funktionen.

Kom ihåg att det finns 1000 millisekunder (ms) på en sekund, så 5000 ms är lika med 5 sekunder.

setTimeout() kommer att utföra funktionen från det första argumentet en gång efter att den angivna tiden har gått.

Exempel:

let timeoutID; function delayTimer() { timeoutID = setTimeout(delayedFunction, 3000); } function delayedFunction() { alert(“Three seconds have elapsed.”); }

När delayTimerfunktionen kallas kommer den att köras setTimeout. Efter 3 sekunder (3000 ms) passerar den, delayedFunctionvilket skickar en varning.

setInterval

Använd för setInterval()att ange en funktion som ska upprepas med en tidsfördröjning mellan körningarna.

Återigen skickas två parametrar till setInterval(): den funktion du vill ringa upp och tiden i millisekunder för att fördröja varje samtalsfunktion.

setInterval() fortsätter att köra tills den rensas.

Exempel:

let intervalID; function repeatEverySecond() { intervalID = setInterval(sendMessage, 1000); } function sendMessage() { console.log(“One second elapsed.”); }

När din kod anropar funktionen repeatEverySecondkommer den att köras setInterval. setIntervalkör funktionen sendMessagevarje sekund (1000 ms).

clearTimeout och clearInterval

Det finns också motsvarande inbyggda funktioner för att stoppa tidshändelserna: clearTimeout()och clearInterval().

Du kanske har märkt att varje timerfunktion ovan sparas i en variabel. När antingen funktionen setTimeouteller setIntervalkörs tilldelas den ett nummer som sparas i denna variabel. Observera att JavaScript gör allt i bakgrunden.

Detta genererade nummer är unikt för varje instans av timers. Detta tilldelade nummer är också hur timers identifieras när du vill stoppa dem. Av denna anledning måste du alltid ställa in timern på en variabel.

För tydligheten i din kod bör du alltid matcha clearTimeout()till setTimeout()och clearInterval()med setInterval().

För att stoppa en timer, ring motsvarande rensningsfunktion och skicka den till timer-ID-variabeln som matchar den timer du vill stoppa. Syntaxen för clearInterval()och clearTimeout()är densamma.

Exempel:

let timeoutID; function delayTimer() { timeoutID = setTimeout(delayedFunction, 3000); } function delayedFunction() { alert(“Three seconds have elapsed.”); } function clearAlert() { clearTimeout(timeoutID); }