Ce este SetInterval în JavaScript și cum funcționează?



JavaScript permite, de asemenea, executarea funcțiilor, precum și a metodelor în ceea ce privește timpul. SetInterval în JavaScript face parte din Timing Events.

JavaScript este utilizat ca limbaj de programare atât pentru client cât și pentru limbaj de programare pentru server. Aceastaoferă o mulțime de metode pentru mai multe funcționalități care trebuie realizate cu ușurință. Asta a făcut unul dintre cele mai populare limbaje de programare, precum și este, de asemenea, utilizat pe scară largă în mai multe tipuri de dezvoltare a produselor.SetInterval în JavaScript face parte din sincronizarea evenimentelor în JavaScript și vom afla despre aceasta în următoarea secvență:

Cronometrarea evenimentelor

JavaScript permite, de asemenea, executarea funcții precum și metode în ceea ce privește timpul și nu timpul de execuție al programului. Aceasta permite executarea funcțiilor la ora specificată, indiferent de momentul execuției programului.





Cele două metode cheie pentru a utiliza evenimentele de sincronizare în JavaScript sunt:

  • setTimeout (funcție, milisecundă)



Această funcție execută funcția în interiorul căreia este trecut ca parametru o singură dată după timpul specificat în milisecunde.

  • setInterval (funcție, milisecundă)

Această funcție execută funcția din timpul de execuție și după fiecare interval de timp atins. Repetă execuția funcției la fiecare interval de timp.



Acum să mergem mai departe și să vedem cum funcționează SetInterval în JavaScript.

SetInterval în JavaScript

Primul parametru al acestei funcții este funcția care trebuie executată, iar al doilea parametru indică intervalul de timp dintre fiecare execuție.

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

Aici, document.getElementById obține elementul de la care are id-ul ca „demo” și funcția d.toLocaleTimeString () oferă ora curentă din sistem.

copie profundă vs superficială java

Prin urmare, acest lucru se repetă la fiecare 1000 de milisecunde, echivalentul a 1 sec. Astfel, funcția este executată în mod repetat la fiecare 1 secundă și, prin urmare, timpul este actualizat la fiecare secundă.

Deci, cum oprim această execuție? Să aflăm!

Cum să oprești execuția?

Putem opri execuția din funcția setInterval () cu ajutorul unei alte funcții numită clearInterval ().clearInterval () folosește variabila returnată din funcția setInterval ().

De exemplu:

myVar = setInterval (funcție, milisecunde) clearInterval (myVar)

Mai jos este un exemplu care folosește atât setInterval (), cât și clearInterval (). Aceasta pornește un ceas și oferă un buton pentru a opri ora.

 

Mai jos este un ceas.

Opreste timpul

Faceți clic pe butonul de mai sus pentru a opri ora.

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

Ieșire:

Ieșire - setinterval în javascript - edureka

Câteva exemple cu setInterval () și clearInterval ().

Crearea unei bare de progres dinamice

#myProgress {width: 100% height: 30px position: relative background-color: #ddd} #myBar {background-color: # 4CAF50 width: 10px height: 30px position: absolute} 
Faceți clic pe Me funcție 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 + '%'}}}

Ieșire:

Ieșirea inițială

Ieșire după clic pe butonul pe care scrie „Faceți clic pe mine”.

Comutați între două fundaluri

Opriți comutarea var myVar = setInterval (setColor, 300) funcție setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'galben'? „roz”: „galben”} funcția stopColor () {clearInterval (myVar)}

Ieșire:

ce este o întrerupere de linie în html

Culoarea ar fi alternată între galben și roz. Ieșirea de mai sus este înainte de a face clic pe buton, iar cea de mai jos este după clic pe buton.

Cu aceasta, am ajuns la sfârșitul articolului nostru SetInterval în JavaScript. Sper că ați înțeles cum funcționează metoda SetInterval.

Verificați de Edureka. Instruirea pentru certificarea dezvoltării web vă va ajuta să aflați cum să creați site-uri web impresionante folosind HTML5, CSS3, Twitter Bootstrap 3, jQuery și API-urile Google și să îl implementați în Amazon Simple Storage Service (S3).

Ai o întrebare pentru noi? Vă rugăm să o menționați în secțiunea de comentarii a acestui blog și vă vom răspunde.