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í
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.