JavaScript brukes som et programmeringsspråk på klientsiden så vel som et programmeringsspråk på serversiden. Dengir en mengde metoder for å utføre flere funksjoner uten problemer. Dette er det som gjorde et av de mest populære programmeringsspråkene, i tillegg til at det også brukes mye på tvers av flere typer produktutvikling.SetInterval i JavaScript er en del av Timing Events i JavaScript, og vi vil lære om det i følgende sekvens:
Timing Hendelser
JavaScript tillater også utføring av funksjoner samt metoder med hensyn til tid og ikke gjennomføringstid for programmet. Dette tillater utførelse av funksjonene til det angitte tidspunktet uavhengig av tidspunktet for gjennomføringen av programmet.
De to viktigste metodene for å bruke Timing Events i JavaScript er:
setTimeout (funksjon, millisekund)
Denne funksjonen utfører funksjonen som overføres som parameter bare én gang etter den angitte tiden i millisekund.
setInterval (funksjon, millisekund)
Denne funksjonen utfører funksjonen fra utførelsestiden og etter hvert tidsintervall som er nådd. Den gjentar funksjonsutførelsen for hvert tidsintervall.
La oss nå gå videre og se hvordan SetInterval i JavaScript fungerer.
SetInterval i JavaScript
Den første parameteren for denne funksjonen er funksjonen som skal utføres, og den andre parameteren angir tidsintervallet mellom hver utførelse.
javascript sjekk lengden på matrisen
var myVar = setInterval (myTimer, 1000) funksjon myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}Her får document.getElementById elementet fra som har id som “demo” og d.toLocaleTimeString () -funksjonen gir gjeldende tid fra systemet.
Derfor gjentas dette hver 1000 millisekund, noe som tilsvarer 1 sek. Dermed blir funksjonen gjentatte ganger utført hvert 1. sekund, og derfor oppdateres tiden hvert sekund.
Så hvordan stopper vi denne henrettelsen? La oss finne det ut!
Hvordan stoppe henrettelsen?
Vi kan stoppe kjøringen fra funksjonen setInterval () ved hjelp av en annen funksjon kalt clearInterval ().clearInterval () bruker variabelen som returneres fra funksjonen setInterval ().
For eksempel:
myVar = setInterval (funksjon, millisekunder) clearInterval (myVar)
Nedenfor er et eksempel som bruker både setInterval () og clearInterval (). Dette starter en klokke og gir en knapp for å stoppe tiden.
Nedenfor er en klokke.
Stopp tiden
Klikk på knappen over for å stoppe tiden.
var myVar = setInterval (myTimer, 1000) funksjon myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}
Produksjon:
Noen flere eksempler med setInterval () og clearInterval ().
Opprette en dynamisk fremdriftslinje
#myProgress {bredde: 100% høyde: 30px posisjon: relativ bakgrunnsfarge: #ddd} #myBar {bakgrunnsfarge: # 4CAF50 bredde: 10px høyde: 30px posisjon: absolutt}
Klikk på Mig-funksjonen move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} else {bredde ++ elem.style.width = bredde + '%'}}}Produksjon:
Den første utgangen
Output etter å klikke på knappen som sier “Click Me”.
Veksle mellom to bakgrunner
Stopp å bytte var myVar = setInterval (setColor, 300) funksjon setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'gul'? 'rosa': 'gul'} funksjon stopColor () {clearInterval (myVar)}Produksjon:
Fargen vil veksles mellom det gule og rosa. Ovennevnte utdata er før du klikker på knappen og nedenfor er etter klikk på knappen.
Med dette har vi kommet til slutten av vår SetInterval i JavaScript-artikkel. Jeg håper du forsto hvordan SetInterval-metoden fungerer.
Sjekk ut av Edureka. Webutvikling sertifiseringstrening hjelper deg med å lære hvordan du lager imponerende nettsteder ved hjelp av HTML5, CSS3, Twitter Bootstrap 3, jQuery og Google APIer og distribuerer det til Amazon Simple Storage Service (S3).
Har du et spørsmål til oss? Vennligst nevn det i kommentarfeltet på denne bloggen, så kommer vi tilbake til deg.