Kaj je SetInterval v JavaScript in kako deluje?

JavaScript se uporablja kot odjemalski programski jezik kot tudi programski jezik na strežniški strani. Toponuja številne metode za izvajanje več funkcionalnosti z lahkoto. To je tisto, kar je narejeno eden izmed najbolj priljubljenih programskih jezikov in se tudi pogosto uporablja pri več vrstah razvoja izdelkov.SetInterval v JavaScript je del časovnih dogodkov v JavaScript in o njem se bomo naučili v naslednjem zaporedju:

• Časovni dogodki
• SetInterval v JavaScript
• Kako ustaviti izvršbo?

Časovni dogodki

JavaScript omogoča tudi izvajanje funkcije kot tudi metode glede na čas in ne na čas izvajanja programa. To omogoča izvajanje funkcij ob določenem času, ne glede na čas izvajanja programa.

načrt spremljanja in nadzora projekta

Dve ključni metodi za uporabo časovnih dogodkov v JavaScriptu sta:

• setTimeout (funkcija, milisekunda)

  
  
  

Ta funkcija izvrši funkcijo, ki se posreduje kot parameter samo enkrat po določenem času v milisekundah.

• setInterval (funkcija, milisekunda)

Ta funkcija izvrši funkcijo od časa izvajanja in po vsakem doseženem časovnem intervalu. Izvaja izvajanje funkcije v vsakem časovnem intervalu.

Zdaj pa pojdimo naprej in poglejmo, kako deluje SetInterval v JavaScript.

SetInterval v JavaScript

Prvi parameter te funkcije je funkcija, ki jo je treba izvesti, drugi pa označuje časovni interval med vsako izvedbo.

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

Tukaj document.getElementById dobi element iz ki ima id kot »demo«, funkcija d.toLocaleTimeString () pa daje trenutni čas iz sistema.

Zato se to ponovi vsakih 1000 milisekund, kar ustreza 1 sekundi. Tako se funkcija večkrat izvaja vsako 1 sekundo in s tem čas posodablja vsako sekundo.

apache iskra v primerjavi s hadoop mapreduce

Kako torej ustaviti to usmrtitev? Pa ugotovimo!

Kako ustaviti izvršbo?

Izvedbo iz funkcije setInterval () lahko ustavimo s pomočjo druge funkcije, imenovane clearInterval ().clearInterval () uporablja spremenljivko, vrnjeno iz funkcije setInterval ().

Na primer:

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

Spodaj je primer, ki uporablja tako setInterval () kot tudi clearInterval (). S tem zaženete uro in dobite gumb za zaustavitev ure.

 
Spodaj je ura.
Ustavite čas 
 
Kliknite zgornji gumb, da ustavite čas.
var myVar = setInterval (myTimer, 1000) funkcija myTimer () {var d = nov datum () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

Izhod:

Še nekaj primerov s setInterval () in clearInterval ().

Ustvarjanje dinamične vrstice napredka

#myProgress {širina: 100% višina: 30px položaj: relativna barva ozadja: #ddd} #myBar {barva ozadja: # 4CAF50 širina: 10px višina: 30px položaj: absolutno} 
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 + '%'}}}

Izhod:

Začetni izhod

Izpis po kliku na gumb, na katerem piše “Click Me”.

Preklop med dvema ozadjema

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

Izhod:

Barva bi se preklapljala med rumeno in roza. Zgornji izhod je pred klikom na gumb, spodnji pa po kliku na gumb.

__v__

S tem smo prišli do konca našega članka SetInterval v JavaScript. Upam, da ste razumeli, kako deluje metoda SetInterval.

Oglejte si avtor Edureka. Izobraževanje za certificiranje spletnega razvoja vam bo pomagalo Naučiti se ustvariti impresivna spletna mesta z uporabo API-jev HTML5, CSS3, Twitter Bootstrap 3, jQuery in Google ter jih razporediti na Amazon Simple Storage Service (S3).

Imate vprašanje za nas? Prosimo, omenite to v oddelku za komentarje tega spletnega dnevnika in javili se vam bomo