JavaScript Timers setTimeout & setInterval


I den här guiden ska vi titta på JavaScripts timers setTimeout & setInterval plus cleartimeout och clearInterval som stoppar dom.

 

setTimeout()

Med window.setTimeout() kan man ange att ett stycke JavaScript-kod (uttryck) kommer att köras ett visst antal millisekunder efter att den anropades. Den allmänna syntaxen för metoden är:


..där expression är uttrycket som körs efter timeout (antal millisekunder).

Här kommerr ett enkelt exempel:

När en besökare klickar på knappen, kommer setTimeout() metoden att anropas och i uttrycket  passeras uttrycket som vi vill köra efter tidsfördröjningen, och därefter värdet för tidsfördröjningen själv › 5000 millisekunder (eller 5 sekunder).

Det är värt att påpeka att setTimeout() inte stoppa skriptet under timeoutperioden utan schemalägger då angivet uttryck ska köras. Efter anropet till setTimeout() fortsätter scriptet normalt, och timern körs i bakgrunden.

Det är dock vanligare att som första parameter anropa en funktion i stället. I nästa exempel har vi en knapp, som när man klickar på den ändrar knappens textfärg till röd och efter två sekunder till svart:

 

clearTimeout()

Ibland kan det vara användbart att avbryta en timer. clearTimeout() metoden låter oss göra precis det.

Den allmänna syntaxen för metoden är:

..där timeoutId är ID:n för den metod som anropat setTimeout() metoden. I följande exempel så anropas setTimeout() när knappen klickas, men användaren kan avbryta det genom att klicka på knappen igen.

Här kommer HTML-dokumentet;

..och så JavaScript-filen script.js;

 

setInterval () & clearInterval()

Funktionen setInterval() är mycket nära släkt med setTimeout() – de dela också en liknande syntax:

Den viktiga skillnaden är att medan setTimeout() utlöser ett uttryck endast en gång, så fortsätter setInterval() att utlösa uttryck om och om igen (om man inte anger att det att stanna).
Så när ska man använda att det? När man behöver upprepa en setTimeout(), då är det lämpligare att använda setInterval().

Vi tar ett exempel där bakgrundsfärgen ändras var annan sekund och så sätter vi dit en knapp som man kan stoppa det med vilken använder sig av clearInterval().

..och så JavaScript-filen script.js;

Så där, jag hoppas att du lärt dig något, det har jag. Till nästa gång koda smart 🙂

Lämna en kommentar

E-postadressen publiceras inte. Obligatoriska fält är märkta *