Mis on JavaScripti SetInterval ja kuidas see töötab?

JavaScripti kasutatakse nii kliendipoolse programmeerimiskeelena kui ka serveripoolse programmeerimiskeelena. Seepakub arvukalt meetodeid mitme funktsiooni jaoks, mida tuleb hõlpsalt täita. See on see, mis tegi nii üks populaarsemaid programmeerimiskeeli kui ka seda kasutatakse laialdaselt mitut tüüpi tootearenduses.JavaScripti SetInterval on osa JavaScripti ajastussündmustest ja õpime selle kohta järgmises järjestuses:

• Sündmuste ajastus
• SetInterval JavaScriptis
• Kuidas hukkamist peatada?

Sündmuste ajastus

JavaScripti võimaldab ka funktsioone samuti meetodid, mis puudutavad programmi täitmisaega ja mitte. See võimaldab funktsioone täita määratud ajal, olenemata programmi täitmise ajast.

Kaks peamist meetodit Java-sündmuste ajastamiseks on järgmised:

java topelt-int teisendamine

• setTimeout (funktsioon, millisekund)

  
  
  

See funktsioon täidab funktsiooni, mis edastatakse parameetrina ainult üks kord pärast määratud aega millisekundites.

• setInterval (funktsioon, millisekund)

See funktsioon täidab funktsiooni alates täitmisajast ja pärast iga saavutatud ajaintervalli. See kordab funktsiooni täitmist igal ajaintervallil.

Läheme nüüd edasi ja vaadake, kuidas JavaScripti SetInterval töötab.

SetInterval JavaScriptis

Selle funktsiooni esimene parameeter on täidetav funktsioon ja teine ​​parameeter näitab ajavahemikku iga käivitamise vahel.

var myVar = setInterval (myTimer, 1000) funktsioon myTimer () {var d = uus kuupäev () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

Siin saab dokumendi document.getElementById elemendi mille ID on “demo” ja funktsioon d.toLocaleTimeString () annavad süsteemist praeguse aja.

Seega korratakse seda iga 1000 millisekundi järel, mis võrdub 1 sekundiga. Seega täidetakse funktsiooni korduvalt iga 1 sekundi järel ja seega uuendatakse aega iga sekundi järel.

Niisiis, kuidas me selle hukkamise peatame? Uurime välja!

Kuidas hukkamist peatada?

Täitmise saab peatada funktsioonist setInterval () teise funktsiooni abil, mida nimetatakse clearInterval ().clearInterval () kasutab funktsiooni setInterval () tagastatud muutujat.

Näiteks:

myVar = setInterval (funktsioon, millisekundid) clearInterval (myVar)

Allpool on näide, mis kasutab nii setInterval () kui ka clearInterval (). See käivitab kella ja annab nupu aja peatamiseks.

 
Allpool on kell.
Lõpeta aeg 
 
Aja peatamiseks klõpsake ülaltoodud nuppu.
sql-serveri õpetused algajatele
var myVar = setInterval (myTimer, 1000) funktsioon myTimer () {var d = uus kuupäev () document.getElementById ('demo'). internalHTML = d.toLocaleTimeString ()}

Väljund:

Veel mõned näited setInterval () ja clearInterval ().

Dünaamilise edenemisriba loomine

#myProgress {laius: 100% kõrgus: 30px positsioon: suhteline taustavärv: #ddd} #myBar {taustavärv: # 4CAF50 laius: 10px kõrgus: 30px positsioon: absoluutne} 
Klõpsake funktsiooni Mina käsk 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 + '%'}}}

Väljund:

Esialgne väljund

Väljund pärast nupu 'Click Me' klõpsamist.

Lülitumine kahe tausta vahel

Lõpeta var myVar = setInterval (setColor, 300) funktsioon setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'kollane'? 'roosa': 'kollane'} funktsioon stopColor () {clearInterval (myVar)}

Väljund:

Värv oleks lülitatud kollase ja roosa vahele. Ülaltoodud väljund on enne nupul klõpsamist ja allpool on nupul klõpsamine.

Sellega oleme jõudnud oma JavaScripti artikli SetInterval lõppu. Loodan, et saite aru, kuidas SetIntervali meetod töötab.

Vaadake autor Edureka. Veebiarenduse sertifitseerimiskoolitus aitab teil õppida, kuidas HTML5, CSS3, Twitter Bootstrap 3, jQuery ja Google API-de abil luua muljetavaldavaid veebisaite ja juurutada see Amazon Simple Storage Service'i (S3).

Kas teil on meile küsimus? Palun mainige seda selle ajaveebi kommentaaride jaotises ja võtame teiega ühendust.

erinevused html ja xml vahel