Co je SetInterval v JavaScriptu a jak to funguje?

JavaScript se používá jako programovací jazyk na straně klienta i jako programovací jazyk na straně serveru. Toposkytuje nepřeberné množství metod pro snadné provádění několika funkcí. To je to, co se stalo jeden z nejpopulárnějších programovacích jazyků a také se široce používá v několika druzích vývoje produktů.SetInterval v JavaScriptu je součástí časovacích událostí v JavaScriptu a dozvíme se o něm v následujícím pořadí:

• Načasování událostí
• SetInterval v JavaScriptu
• Jak zastavit popravu?

Načasování událostí

JavaScript také umožňuje provádění funkce stejně jako metody s ohledem na čas, a nikoli na čas provádění programu. To umožňuje provádění funkcí ve stanoveném čase bez ohledu na čas provádění programu.

Dvě klíčové metody pro použití časových událostí v JavaScriptu jsou:

• setTimeout (funkce, milisekundy)

  
  
  

Tato funkce provede funkci uvnitř, která je předána jako parametr pouze jednou po zadaném čase v milisekundách.

• setInterval (funkce, milisekundy)

Tato funkce provede funkci od doby provedení a po každém dosaženém časovém intervalu. Opakuje provádění funkce v každém časovém intervalu.

Pojďme se nyní podívat, jak funguje SetInterval v JavaScriptu.

SetInterval v JavaScriptu

První parametr této funkce je funkce, která má být provedena, a druhý parametr označuje časový interval mezi každým provedením.

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

Zde document.getElementById získá prvek který má id jako „demo“ a funkce d.toLocaleTimeString () udává aktuální čas ze systému.

Proto se to opakuje každých 1000 milisekund, což odpovídá 1 s. Funkce se tedy opakovaně provádí každou 1 sekundu, a proto se čas aktualizuje každou sekundu.

Jak tedy zastavíme tuto popravu? Pojďme to zjistit!

Jak zastavit popravu?

Můžeme zastavit provádění z funkce setInterval () pomocí další funkce zvané clearInterval ().clearInterval () používá proměnnou vrácenou z funkce setInterval ().

Například:

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

Níže je uveden příklad, který používá jak setInterval (), tak clearInterval (). Spustí se hodiny a tlačítko k zastavení času.

 
Níže jsou hodiny.
Čas zastavení 
 
Čas zastavíte kliknutím na tlačítko výše.
var myVar = setInterval (myTimer, 1000) funkce myTimer () {var d = nový Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}

Výstup:

Některé další příklady s setInterval () a clearInterval ().

Vytvoření dynamického pruhu postupu

#myProgress {šířka: 100% výška: 30px pozice: relativní barva pozadí: #ddd} #myBar {barva pozadí: # 4CAF50 šířka: 10px výška: 30px pozice: absolutní} 
Funkce 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ýstup:

Počáteční výstup

Výstup po kliknutí na tlačítko s názvem „Click Me“.

Přepínání mezi dvěma pozadí

Zastavit přepínání var myVar = setInterval (setColor, 300) funkce setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'žlutá'? 'pink': 'yellow'} funkce stopColor () {clearInterval (myVar)}

Výstup:

Barva by se přepínala mezi žlutou a růžovou. Výše uvedený výstup je před kliknutím na tlačítko a níže uvedený je po kliknutí na tlačítko.

Tím jsme se dostali na konec článku SetInterval v JavaScriptu. Doufám, že jste pochopili, jak metoda SetInterval funguje.

jak používat tostring metodu v Javě

Podívejte se na podle Edureka. Osvědčení o školení pro vývoj webových aplikací vám pomůže Naučte se, jak vytvářet působivé webové stránky pomocí HTML5, CSS3, Twitter Bootstrap 3, jQuery a Google API a jak je nasadit na Amazon Simple Storage Service (S3).

Máte na nás dotaz? Uveďte to prosím v sekci komentářů tohoto blogu a my se vám ozveme.