Čo je SetInterval v JavaScripte a ako to funguje?

JavaScript sa používa ako programovací jazyk na strane klienta aj ako programovací jazyk na strane servera. Toposkytuje množstvo metód pre ľahké vykonávanie niekoľkých funkcií. Toto je to, čo sa stalo jeden z najpopulárnejších programovacích jazykov a tiež sa široko používa v niekoľkých druhoch vývoja produktov.SetInterval v JavaScripte je súčasťou Časových udalostí v JavaScripte a dozvieme sa o ňom v nasledujúcom poradí:

• Časové udalosti
• SetInterval v JavaScripte
• Ako zastaviť exekúciu?

Časové udalosti

JavaScript tiež umožňuje vykonávanie funkcie ako aj metódy týkajúce sa času a nie času vykonania programu. To umožňuje vykonávanie funkcií v zadanom čase bez ohľadu na čas vykonania programu.

Dve kľúčové metódy použitia časových udalostí v JavaScripte sú:

• setTimeout (funkcia, milisekundy)

  
  
  

Táto funkcia vykoná funkciu, vo vnútri ktorej sa odovzdá ako parameter iba raz po stanovenom čase v milisekundách.

• setInterval (funkcia, milisekundy)

Táto funkcia vykonáva funkciu od času vykonania a po dosiahnutí každého časového intervalu. Opakuje vykonávanie funkcií v každom časovom intervale.

Teraz sa poďme pozrieť na to, ako funguje SetInterval v JavaScripte.

SetInterval v JavaScripte

Prvý parameter tejto funkcie je funkcia, ktorá sa má vykonať, a druhý parameter označuje časový interval medzi každým vykonaním.

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

Tu document.getElementById získa prvok z ktorý má id ako „demo“ a funkcia d.toLocaleTimeString () poskytuje aktuálny čas zo systému.

Preto sa to opakuje každých 1 000 milisekúnd, čo je ekvivalentné 1 sekunde. Funkcia sa teda opakovane vykonáva každú 1 sekundu, a preto sa čas aktualizuje každú sekundu.

Ako teda zastavíme túto popravu? Poďme zistiť!

Ako zastaviť exekúciu?

Vykonanie z funkcie setInterval () môžeme zastaviť pomocou ďalšej funkcie s názvom clearInterval ().clearInterval () používa premennú vrátenú z funkcie setInterval ().

Napríklad:

myVar = setInterval (funkcia, milisekundy) clearInterval (myVar)

Ďalej uvádzame príklad, ktorý používa setInterval () aj clearInterval (). Spustia sa hodiny a tlačidlo na zastavenie času.

 
Dole sú hodiny.
Zastaviť čas 
 
Kliknutím na tlačidlo hore zastavíte čas.
var myVar = setInterval (myTimer, 1000) funkcia myTimer () {var d = nový Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

Výkon:

Niekoľko ďalších príkladov s setInterval () a clearInterval ().

Vytvorenie dynamického pruhu postupu

#myProgress {šírka: 100% výška: 30px pozícia: relatívna farba pozadia: #ddd} #myBar {farba pozadia: # 4CAF50 šírka: 10px výška: 30px pozícia: absolútna} 
Funkcia Click Me 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ýkon:

Počiatočný výstup

Výstup po kliknutí na tlačidlo s textom „Kliknite na mňa“.

Prepínať medzi dvoma pozadiami

Zastaviť prepínanie var myVar = setInterval (setColor, 300) funkcia setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'žltá'? 'pink': 'yellow'} funkcia stopColor () {clearInterval (myVar)}

Výkon:

Farba by sa prepínala medzi žltou a ružovou. Vyššie uvedený výstup je pred kliknutím na tlačidlo a nasledujúci je po kliknutí na tlačidlo.

Týmto sme sa dostali na koniec článku SetInterval in JavaScript. Dúfam, že ste pochopili, ako funguje metóda SetInterval.

java čo je skener

Pozrite sa na od Edureka. Osvedčenie o školení v oblasti vývoja webových stránok vám pomôže Naučte sa, ako vytvárať pôsobivé webové stránky pomocou HTML5, CSS3, Twitter Bootstrap 3, jQuery a Google API a ako ich nasadiť do služby Amazon Simple Storage Service (S3).

Máte na nás otázku? Uveďte to, prosím, v sekcii komentárov tohto blogu a my sa vám ozveme.