JavaScript används både som programmeringsspråk på klientsidan och som programmeringsspråk på serversidan. denger en mängd metoder för att flera funktioner ska kunna utföras med lätthet. Det här är det som gjorde ett av de mest populära programmeringsspråken såväl som det också används i stor utsträckning över flera typer av produktutveckling.SetInterval i JavaScript är en del av Timing Events i JavaScript och vi lär oss om det i följande ordning:
ring med referens c ++ exempel
Tidshändelser
JavaScript tillåter också körning av funktioner samt metoder med avseende på programmets tid och inte exekveringstid. Detta möjliggör utförandet av funktionerna vid den angivna tiden oavsett tidpunkten för genomförandet av programmet.
De två viktigaste metoderna för att använda tidshändelserna i JavaScript är:
setTimeout (funktion, millisekund)
Den här funktionen utför funktionen inuti vilken skickas som en parameter bara en gång efter den angivna tiden i millisekund.
setInterval (funktion, millisekund)
Denna funktion utför funktionen från körningstiden och efter varje uppnått tidsintervall. Det upprepar funktionskörningen vid varje tidsintervall.
Låt oss nu gå vidare och se hur SetInterval i JavaScript fungerar.
SetInterval i JavaScript
Den första parametern för denna funktion är den funktion som ska köras och den andra parametern anger tidsintervallet mellan varje körning.
var myVar = setInterval (myTimer, 1000) funktion myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}Här hämtar document.getElementById elementet från som har id som “demo” och d.toLocaleTimeString () -funktionen ger aktuell tid från systemet.
Därför upprepas detta var 1000 millisekund vilket motsvarar 1 sek. Således utförs funktionen upprepade gånger var 1: a sekund och därför uppdateras tiden varje sekund.
Så hur stoppar vi detta utförande? Låt oss ta reda på!
Hur stoppar man avrättningen?
Vi kan stoppa körningen från funktionen setInterval () med hjälp av en annan funktion som heter clearInterval ().clearInterval () använder variabeln som returneras från funktionen setInterval ().
Till exempel:
myVar = setInterval (funktion, millisekunder) clearInterval (myVar)
Nedan följer ett exempel som använder både setInterval () och clearInterval (). Detta startar en klocka och ger en knapp för att stoppa tiden.
Nedan är en klocka.
Stanna tiden
Klicka på knappen ovan för att stoppa tiden.
var myVar = setInterval (myTimer, 1000) funktion myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}
Produktion:
Några fler exempel med setInterval () och clearInterval ().
Skapa en dynamisk förloppsindikator
#myProgress {bredd: 100% höjd: 30px position: relativ bakgrundsfärg: #ddd} #myBar {bakgrundsfärg: # 4CAF50 bredd: 10px höjd: 30px position: absolut}
Klicka på mig-funktionen move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} else {width ++ elem.style.width = width + '%'}}}Produktion:
Den ursprungliga utdata
Output efter klick på knappen som säger “Click Me”.
Växla mellan två bakgrund
Sluta växla var myVar = setInterval (setColor, 300) funktion setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'gul'? 'rosa': 'gul'} funktion stopColor () {clearInterval (myVar)}Produktion:
Färgen växlades mellan gult och rosa. Ovanstående utdata är innan du klickar på knappen och nedan är efter klicket på knappen.
Med detta har vi kommit till slutet av vår SetInterval i JavaScript-artikel. Jag hoppas att du förstod hur SetInterval-metoden fungerar.
Kolla in av Edureka. Webbutvecklingscertifieringsträning hjälper dig att lära dig hur du skapar imponerande webbplatser med HTML5, CSS3, Twitter Bootstrap 3, jQuery och Google API: er och distribuerar den till Amazon Simple Storage Service (S3).
mysql_fetch_array
Har du en fråga till oss? Vänligen nämna det i kommentarsektionen på den här bloggen så återkommer vi till dig.