Što je SetInterval u JavaScript-u i kako to funkcionira?



JavaScript također omogućuje izvršavanje funkcija kao i metoda s obzirom na vrijeme. SetInterval u JavaScript-u dio je vremenskih događaja.

JavaScript se koristi kao programski jezik na strani klijenta, kao i programski jezik na strani poslužitelja. Topruža mnoštvo metoda za nekoliko funkcionalnosti koje se izvode s lakoćom. To je ono što je napravljeno jedan od najpopularnijih programskih jezika, ali se također široko koristi u nekoliko vrsta razvoja proizvoda.SetInterval u JavaScript-u dio je vremenskih događaja u JavaScript-u i o njemu ćemo učiti u sljedećem slijedu:

Vremenski događaji

JavaScript također omogućuje izvršenje funkcije kao i metode s obzirom na vrijeme, a ne na vrijeme izvođenja programa. To omogućuje izvršavanje funkcija u određeno vrijeme, bez obzira na vrijeme izvršenja programa.





Dvije ključne metode za korištenje vremenskih događaja u JavaScriptu su:

  • setTimeout (funkcija, milisekunda)



Ova funkcija izvršava funkciju koja se kao parametar prosljeđuje samo jednom nakon određenog vremena u milisekundama.

Ova funkcija izvršava funkciju od vremena izvršenja i nakon svakog dosegnutog vremenskog intervala. Ponavlja izvršavanje funkcije u svakom vremenskom intervalu.



Krenimo sada i pogledajte kako SetInterval u JavaScript-u funkcionira.

SetInterval u JavaScript-u

Prvi parametar ove funkcije je funkcija koju treba izvršiti, a drugi parametar označava vremenski interval između svakog izvršavanja.

var myVar = setInterval (myTimer, 1000) funkcija myTimer () {var d = novi datum () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

Ovdje document.getElementById dobiva element iz koji ima id kao 'demo', a funkcija d.toLocaleTimeString () daje trenutno vrijeme iz sustava.

Stoga se to ponavlja svakih 1000 milisekundi što je ekvivalentno 1 sekundi. Dakle, funkcija se opetovano izvršava svake 1 sekunde i stoga se vrijeme ažurira svake sekunde.

Pa kako zaustaviti ovo pogubljenje? Hajde da vidimo!

Kako zaustaviti ovrhu?

Izvršenje iz funkcije setInterval () možemo zaustaviti uz pomoć druge funkcije koja se naziva clearInterval ().clearInterval () koristi varijablu vraćenu iz funkcije setInterval ().

Na primjer:

myVar = setInterval (funkcija, milisekunde) clearInterval (myVar)

Ispod je primjer koji koristi i setInterval (), kao i clearInterval (). Ovo pokreće sat i pruža gumb za zaustavljanje vremena.

 

Ispod je sat.

Zaustavite vrijeme

Pritisnite gornji gumb da biste zaustavili vrijeme.

var myVar = setInterval (myTimer, 1000) funkcija myTimer () {var d = novi datum () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

Izlaz:

Izlaz - setinterval u javascriptu - edureka

Još nekoliko primjera s setInterval () i clearInterval ().

Stvaranje dinamičke trake napretka

#myProgress {širina: 100% visina: 30px pozicija: relativna boja pozadine: #ddd} #myBar {pozadina-boja: # 4CAF50 širina: 10px visina: 30px pozicija: apsolutna} 
Kliknite Me function move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} else {širina ++ elem.style.width = širina + '%'}}}

Izlaz:

Početni izlaz

Izlaz nakon klika na gumb na kojem piše 'Click Me'.

Prebacivanje između dvije pozadine

Zaustavi prebacivanje var myVar = setInterval (setColor, 300) funkcija setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'žuta'? 'ružičasta': 'žuta'} funkcija stopColor () {clearInterval (myVar)}

Izlaz:

Boja bi se prebacivala između žute i ružičaste. Gornji izlaz je prije klika na gumb, a donji je nakon klika na gumb.

možete li baciti dvostruku na int

Ovim smo došli do kraja našeg SetIntervala u JavaScript članku. Nadam se da ste razumjeli kako funkcionira metoda SetInterval.

Pogledajte od Edureke. Obuka za certificiranje web razvoja pomoći će vam naučiti kako stvoriti impresivne web stranice pomoću HTML5, CSS3, Twitter Bootstrap 3, jQuery i Google API-ja i rasporediti ih na Amazon Simple Storage Service (S3).

Imate pitanje za nas? Molimo vas da ga spominjete u odjeljku za komentare ovog bloga i mi ćemo vam se javiti.