Ano ang SetInterval sa JavaScript at Paano Ito Gumagana?

Ginagamit ang JavaScript bilang isang wikang nagprogram ng panig ng client pati na rin ang isang wika ng programang panig ng server. Itonagbibigay ng isang kalabisan ng mga pamamaraan para sa maraming mga pagpapaandar na maisagawa nang madali. Ito ang gumawa isa sa mga pinakapopular na wika ng programa pati na rin ito ay ginagamit din ng malawak sa maraming uri ng pag-unlad ng produkto.Ang SetInterval sa JavaScript ay isang bahagi ng Mga Kaganapan sa Oras sa JavaScript at matututunan natin ang tungkol dito sa sumusunod na pagkakasunud-sunod:

• Mga Kaganapan sa Oras
• Itakda ang Interval sa JavaScript
• Paano Ititigil ang Pagpapatupad?

Mga Kaganapan sa Oras

Pinapayagan din ng JavaScript ang pagpapatupad ng pagpapaandar pati na rin ang mga pamamaraan na patungkol sa oras at hindi sa oras ng pagpapatupad ng programa. Pinapayagan nito ang pagpapatupad ng mga pagpapaandar sa tinukoy na oras anuman ang oras ng pagpapatupad ng programa.

kung paano i-access ang aws sij

Ang dalawang pangunahing pamamaraan upang magamit ang Mga Kaganapan sa Oras sa JavaScript ay:

• setTimeout (pagpapaandar, millisecond)

  
  
  

Ang pagpapaandar na ito ay nagpapatupad ng pagpapaandar sa loob na kung saan ay naipasa bilang isang parameter isang beses lamang matapos ang tinukoy na oras sa millisecond.

• setInterval (pagpapaandar, millisecond)

Ang pagpapaandar na ito ay nagpapatupad ng pagpapaandar mula sa oras ng pagpapatupad at pagkatapos naabot ang bawat agwat ng oras. Inuulit nito ang pagpapatupad ng pagpapaandar sa bawat agwat ng oras.

Ngayon, magpatuloy tayo at tingnan kung paano gumagana ang SetInterval sa JavaScript.

Itakda ang Interval sa JavaScript

Ang unang parameter ng pagpapaandar na ito ay ang pagpapaandar na naisakatuparan at ang pangalawang parameter ay nagpapahiwatig ng agwat ng oras sa pagitan ng bawat pagpapatupad.

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

Dito, nakukuha ng document.getElementById ang elemento mula sa na mayroong id bilang 'demo' at function na d.toLocaleTimeString () bigyan ang kasalukuyang oras mula sa system.

Samakatuwid, ito ay paulit-ulit bawat 1000 millisecond na katumbas ng 1 sec. Kaya, ang pagpapaandar ay paulit-ulit na naisasagawa bawat 1 segundo at samakatuwid ang oras ay ina-update bawat segundo.

kumuha ng haba ng array js

Kaya paano natin titigilan ang pagpapatupad na ito? Alamin Natin!

Paano Ititigil ang Pagpapatupad?

Maaari nating ihinto ang pagpapatupad mula sa function setInterval () sa tulong ng isa pang pagpapaandar na tinatawag na clearInterval ().Ang clearInterval () ay gumagamit ng variable na ibinalik mula sa function setInterval ().

Halimbawa:

myVar = setInterval (pagpapaandar, milliseconds) clearInterval (myVar)

Nasa ibaba ang isang halimbawa na gumagamit ng parehong setInterval () pati na rin ang clearInterval (). Nagsisimula ito ng isang orasan at nagbibigay ng isang pindutan upang ihinto ang oras.

 
Nasa ibaba ang isang orasan.
Ihinto ang oras 
 
I-click ang pindutan sa itaas upang ihinto ang oras.
var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

Output:

Ang ilan pang mga halimbawa na may setInterval () at clearInterval ().

Lumilikha ng isang dynamic na bar ng pag-unlad

#myProgress {lapad: 100% taas: 30px posisyon: kamag-anak background-color: #ddd} #myBar {background-color: # 4CAF50 lapad: 10px taas: 30px posisyon: absolute} 
I-click ang Me function move () {var elem = document.getElementById ('myBar') var width = 0 var id = setInterval (frame, 10) function frame () {if (width == 100) {clearInterval (id)} pa {lapad ++ elem.style.width = lapad + '%'}}}

Output:

Ang paunang output

Output pagkatapos ng pag-click sa pindutan na nagsasabing 'Mag-click sa Akin'.

Magpalipat-lipat sa pagitan ng dalawang background

Ihinto ang Pag-toggle ng var myVar = setInterval (setColor, 300) function setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'dilaw'? 'pink': 'yellow'} function stopColor () {clearInterval (myVar)}

Output:

Ang kulay ay mai-toggle sa pagitan ng dilaw at kulay-rosas. Ang output sa itaas ay bago mag-click sa pindutan at sa ibaba ay pagkatapos ng pag-click sa pindutan.

java kailan gagamitin ito

Sa pamamagitan nito, nakarating kami sa dulo ng aming SetInterval sa artikulong JavaScript. Inaasahan kong naiintindihan mo kung paano gumagana ang pamamaraan ng SetInterval.

Suriin ang ni Edureka. Tutulungan ka ng Pagsasanay sa Pagpapatunay sa Pag-unlad ng Web na Alamin kung paano lumikha ng mga kahanga-hangang website gamit ang HTML5, CSS3, Twitter Bootstrap 3, jQuery at Google API at i-deploy ito sa Amazon Simple Storage Service (S3).

May tanong ba sa amin? Mangyaring banggitin ito sa seksyon ng mga komento ng blog na ito at babalikan ka namin.