JavaScriptiä käytetään asiakaspuolen ohjelmointikielenä sekä palvelinpuolen ohjelmointikielenä. Setarjoaa lukuisia menetelmiä useille toiminnoille, jotka on suoritettava helposti. Tämä teki yksi suosituimmista ohjelmointikielistä, ja sitä käytetään myös laajalti monenlaisissa tuotekehityksissä.SetInterval JavaScript on osa Java-tapahtumien ajoitusta ja opimme siitä seuraavassa järjestyksessä:
Tapahtumien ajoitus
JavaScript sallii myös toimintoja samoin kuin menetelmät suhteessa ohjelman aikaan eikä suoritusaikaan. Tämä mahdollistaa toimintojen suorittamisen määritettynä ajankohtana riippumatta ohjelman suorittamisajasta.
Kaksi keskeistä tapaa käyttää ajoitettuja tapahtumia JavaScriptissä ovat:
setTimeout (funktio, millisekunti)
Tämä toiminto suorittaa toiminnon, jonka sisällä parametri välitetään vain kerran määritetyn ajan jälkeen millisekunnissa.
setInterval (funktio, millisekunti)
Tämä toiminto suorittaa toiminnon suoritusajasta ja jokaisen saavutetun aikavälin jälkeen. Se toistaa toiminnon suorittamisen jokaisella aikavälillä.
Siirrytään nyt eteenpäin ja katsotaan, miten JavaScriptin SetInterval toimii.
SetInterval JavaScriptissa
Tämän toiminnon ensimmäinen parametri on suoritettava toiminto ja toinen parametri ilmaisee kunkin suorituksen välisen aikavälin.
ero xml: n ja html: n välillä
var myVar = setInterval (myTimer, 1000) -toiminto myTimer () {var d = uusi päivämäärä () document.getElementById ('demo'). internalHTML = d.toLocaleTimeString ()}Täältä document.getElementById saa elementin jonka tunnus on “demo” ja d.toLocaleTimeString () -toiminto antavat nykyisen ajan järjestelmästä.
Siksi tämä toistetaan 1000 millisekunnin välein, mikä vastaa 1 sekuntia. Täten toiminto suoritetaan toistuvasti 1 sekunnin välein ja siten aika päivitetään joka sekunti.
Joten miten lopetamme tämän teloituksen? Otetaan selvää!
Kuinka lopettaa teloitus?
Voimme pysäyttää suorituksen funktiosta setInterval () toisen toiminnon, nimeltään clearInterval (), avulla.clearInterval () käyttää funktiosta setInterval () palautettua muuttujaa.
Esimerkiksi:
myVar = setInterval (funktio, millisekunnit) clearInterval (myVar)
Alla on esimerkki, joka käyttää sekä setInterval () - että clearInterval () -ominaisuuksia. Tämä käynnistää kellon ja tarjoaa painikkeen ajan pysäyttämiseksi.
Alla on kello.
Pysäytä aika
Napsauta yllä olevaa painiketta pysäyttääksesi ajan.
var myVar = setInterval (myTimer, 1000) -toiminto myTimer () {var d = uusi päivämäärä () document.getElementById ('demo'). internalHTML = d.toLocaleTimeString ()}
Tuotos:
Joitakin muita esimerkkejä setInterval () ja clearInterval ().
Dynaamisen edistymispalkin luominen
#myProgress {leveys: 100% korkeus: 30 kuvapisteen sijainti: suhteellinen taustaväri: #ddd} # myBar {taustaväri: # 4CAF50 leveys: 10 kuvapisteen korkeus: 30 kuvapisteen sijainti: absoluuttinen}
Napsauta Minä-funktio 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 + '%'}}}Tuotos:
Alkuperäinen lähtö
Tulos napsauttamalla painiketta, joka sanoo 'Click Me'.
Vaihda kahden taustan välillä
Lopeta var myVar = setInterval (setColor, 300) -toiminto setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'keltainen'? 'vaaleanpunainen': 'keltainen'} toiminto stopColor () {clearInterval (myVar)}Tuotos:
Väri vaihdetaan keltaisen ja vaaleanpunaisen väliin. Yllä oleva tulos on ennen painikkeen napsauttamista ja alla oleva painikkeen napsauttamisen jälkeen.
Tämän avulla olemme päässeet JavaScriptin artikkeliin SetInterval. Toivon, että ymmärsit kuinka SetInterval-menetelmä toimii.
Katso kirjoittanut Edureka. Verkkokehityksen sertifiointikoulutus auttaa sinua oppimaan luomaan vaikuttavia verkkosivustoja HTML5-, CSS3-, Twitter Bootstrap 3-, jQuery- ja Google-sovellusliittymien avulla ja asentamaan sen Amazon Simple Storage Service (S3) -palveluun.
Onko sinulla kysymys meille? Mainitse se tämän blogin kommenttiosassa ja palaamme sinuun.