Kas ir SetInterval JavaScript un kā tas darbojas?

JavaScript ļauj arī izpildīt funkcijas, kā arī metodes attiecībā uz laiku. SetInterval JavaScript ir daļa no notikumu laika.

JavaScript tiek izmantots kā klienta puses programmēšanas valoda, kā arī servera puses programmēšanas valoda. Tānodrošina daudzu metožu vairākām funkcijām, kas jāveic viegli. Tas ir tas, kas radīja viena no populārākajām programmēšanas valodām, kā arī tā tiek plaši izmantota vairāku veidu produktu izstrādē.SetInterval JavaScript ir daļa no JavaScript laika notikumiem, un mēs par to uzzināsim šādā secībā:

Laiks Notikumi

JavaScript arī ļauj izpildīt funkcijas kā arī metodes attiecībā uz programmas izpildes laiku, nevis uz izpildes laiku. Tas ļauj izpildīt funkcijas norādītajā laikā neatkarīgi no programmas izpildes laika.





Divas galvenās notikumu laika izmantošanas metodes JavaScript ir:

  • setTimeout (funkcija, milisekunde)



Šī funkcija izpilda funkciju, kuras iekšpusē parametrs tiek pārsūtīts tikai vienu reizi pēc noteiktā laika milisekundēs.

kas ir līnijas pārtraukums html
  • setInterval (funkcija, milisekunde)

Šī funkcija izpilda funkciju no izpildes laika un pēc katra sasniegtā laika intervāla. Tas atkārto funkcijas izpildi katrā laika intervālā.



Tagad turpināsim un redzēsim, kā darbojas JavaScript SetInterval.

SetInterval JavaScript

Šīs funkcijas pirmais parametrs ir izpildāmā funkcija, un otrais parametrs norāda laika intervālu starp katru izpildi.

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

Šeit document.getElementById iegūst elementu no kuras ID ir “demo” un funkcija d.toLocaleTimeString () dod pašreizējo laiku no sistēmas.

Tādējādi tas tiek atkārtots ik pēc 1000 milisekundēm, kas ir vienāds ar 1 sek. Tādējādi funkcija tiek atkārtoti izpildīta ik pēc 1 sekundes, un tāpēc laiks tiek atjaunināts katru sekundi.

Tātad, kā mēs pārtraucam šo izpildi? Noskaidrosim!

Kā apturēt izpildi?

Mēs varam apturēt izpildi no funkcijas setInterval (), izmantojot citu funkciju, kuras nosaukums ir clearInterval ().clearInterval () izmanto mainīgo, kas atgriezts no funkcijas setInterval ().

Piemēram:

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

Tālāk ir sniegts piemērs, kas izmanto gan setInterval (), gan clearInterval (). Tas sāk pulksteni un nodrošina pogu laika apturēšanai.

 

Zemāk ir pulkstenis.

Pārtraukt laiku

Noklikšķiniet uz pogas iepriekš, lai apturētu laiku.

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

Izeja:

oracle pl sql kļūdu apstrādes paraugprakse

Rezultāts - setinterval javascript - edureka

Daži citi piemēri ar setInterval () un clearInterval ().

Dinamiskas progresa joslas izveide

#myProgress {platums: 100% augstums: 30 pikseļu pozīcija: relatīvā fona krāsa: #ddd} #myBar {fona krāsa: # 4CAF50 platums: 10 pikseļu augstums: 30 pikseļu pozīcija: absolūts} 
Noklikšķiniet uz funkcijas Man pārvietot () {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 + '%'}}}

Izeja:

Sākotnējā izeja

Rezultāts pēc klikšķa uz pogas, kas saka “Noklikšķiniet uz manis”.

Pārslēdzieties starp diviem foniem

Pārtraukt pārslēgšanu var myVar = setInterval (setColor, 300) funkcija setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'dzeltens'? 'pink': 'yellow'} funkcija stopColor () {clearInterval (myVar)}

Izeja:

kam tiek izmantots pavasara karkass

Krāsa būtu pārslēgta starp dzelteno un rozā. Iepriekš minētā izeja ir pirms noklikšķināšanas uz pogas, un zemāk ir pēc noklikšķināšanas uz pogas.

Ar to mēs esam nonākuši pie sava raksta SetInterval beigām. Es ceru, ka jūs sapratāt, kā darbojas SetInterval metode.

Pārbaudiet autore Edureka. Tīmekļa attīstības sertifikācijas apmācība palīdzēs jums uzzināt, kā izveidot iespaidīgas vietnes, izmantojot HTML5, CSS3, Twitter Bootstrap 3, jQuery un Google API, un izvietot to Amazon Simple Storage Service (S3).

Vai mums ir jautājums? Lūdzu, pieminējiet to šī emuāra komentāru sadaļā, un mēs ar jums sazināsimies.