Kas yra „JavaScript“ „SetInterval“ ir kaip jis veikia?



„JavaScript“ taip pat leidžia vykdyti funkcijas ir metodus atsižvelgiant į laiką. „JavaScript“ „SetInterval“ yra „Laiko įvykių“ dalis.

„JavaScript“ naudojama kaip kliento programavimo kalba, taip pat kaip serverio programavimo kalba. Taipateikia daugybę kelių funkcijų, kurias reikia lengvai atlikti, metodų. Tai ir padarė viena iš populiariausių programavimo kalbų, taip pat ji plačiai naudojama keliems produktų kūrimo būdams.„JavaScript“ „SetInterval“ yra „JavaScript“ įvykių laiko dalis ir apie tai sužinosime tokia seka:

Renginių laikas

„JavaScript“ taip pat leidžia vykdyti funkcijos taip pat metodus, susijusius su programos, o ne vykdymo laiku. Tai leidžia vykdyti funkcijas nurodytu laiku, neatsižvelgiant į programos vykdymo laiką.



Du pagrindiniai „JavaScript“ įvykių laiko naudojimo būdai yra šie:

  • setTimeout (funkcija, milisekundė)



Ši funkcija vykdo funkciją, kuri kaip parametras perduodama tik vieną kartą po nurodyto laiko milisekundėmis.

  • setInterval (funkcija, milisekundė)

Ši funkcija vykdo funkciją nuo vykdymo laiko ir po kiekvieno pasiekto laiko intervalo. Jis kartoja funkcijos vykdymą kiekvienu laiko intervalu.



Dabar eikime ir pažiūrėkime, kaip veikia „JavaScript“ „SetInterval“.

„SetInterval“ „JavaScript“

Pirmasis šios funkcijos parametras yra vykdytina funkcija, o antrasis parametras nurodo laiko intervalą tarp kiekvieno vykdymo.

var myVar = setInterval (myTimer, 1000) funkcija myTimer () {var d = new Date () document.getElementById ('demo'). internalHTML = d.toLocaleTimeString ()}

Čia „document.getElementById“ gauna elementą iš kurio ID yra „demo“ ir d.toLocaleTimeString () funkcija pateikia dabartinį laiką iš sistemos.

Vadinasi, tai kartojama kas 1000 milisekundžių, o tai atitinka 1 sek. Taigi funkcija pakartotinai vykdoma kas 1 sekundę, todėl laikas kas sekundę atnaujinamas.

Taigi, kaip sustabdyti šią egzekuciją? Išsiaiškinkime!

Kaip sustabdyti vykdymą?

Vykdymą iš funkcijos setInterval () galime sustabdyti kitos funkcijos, vadinamos clearInterval (), pagalba.clearInterval () naudoja kintamąjį, grąžintą iš funkcijos setInterval ().

Pavyzdžiui:

myVar = setInterval (funkcija, milisekundės) clearInterval (myVar)

Žemiau pateikiamas pavyzdys, kuris naudoja ir setInterval (), ir clearInterval (). Tai paleidžia laikrodį ir pateikia mygtuką sustabdyti laiką.

 

Žemiau yra laikrodis.

Sustabdyti laiką

Spustelėkite aukščiau esantį mygtuką, kad sustabdytumėte laiką.

var myVar = setInterval (myTimer, 1000) funkcija myTimer () {var d = new Date () document.getElementById ('demo'). internalHTML = d.toLocaleTimeString ()}

Išvestis:

kaip dvigubai paversti int

Rezultatas - setinterval javascript - edureka

Keli pavyzdžiai su setInterval () ir clearInterval ().

Dinaminės eigos juostos sukūrimas

#myProgress {plotis: 100% aukštis: 30 taškų padėtis: santykinė fono spalva: #ddd} # myBar {background-color: # 4CAF50 plotis: 10 taškų aukštis: 30 taškų pozicija: absoliutus} 
Spustelėkite manęs funkciją move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} else {plotis ++ elem.style.width = plotis + '%'}}}

Išvestis:

Pradinė išvestis

Rezultatas paspaudus mygtuką, kuriame sakoma „Spustelėkite mane“.

Perjungti tarp dviejų fonų

Nustoti perjungti var myVar = setInterval (setColor, 300) funkcija setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'geltona'? 'pink': 'yellow'} funkcija stopColor () {clearInterval (myVar)}

Išvestis:

Spalva būtų perjungta tarp geltonos ir rausvos. Pirmiau pateiktas išvestis yra prieš paspaudžiant mygtuką, o žemiau yra po mygtuko paspaudimo.

Tai pasiekėme „SetInterval“ „JavaScript“ straipsnyje. Tikiuosi, kad supratote, kaip veikia „SetInterval“ metodas.

Patikrinkite pateikė Edureka. Žiniatinklio kūrimo sertifikavimo mokymai padės jums sužinoti, kaip sukurti įspūdingas svetaines naudojant HTML5, CSS3, „Twitter Bootstrap 3“, „jQuery“ ir „Google“ API ir pritaikyti ją „Amazon Simple Storage Service“ (S3).

Turite mums klausimą? Prašau tai paminėti šio tinklaraščio komentarų skiltyje ir mes su jumis susisieksime.