JavaScript jest używany jako język programowania po stronie klienta, a także język programowania po stronie serwera. Tozapewnia mnóstwo metod łatwego wykonywania kilku funkcji. Oto, co się stało jeden z najpopularniejszych języków programowania, a także jest szeroko stosowany w kilku rodzajach rozwoju produktów.SetInterval w JavaScript jest częścią Timing Events w JavaScript i dowiemy się o tym w następującej kolejności:
jakie są funkcje w sql
Wydarzenia czasowe
JavaScript umożliwia również wykonywanie Funkcje a także metody w odniesieniu do czasu, a nie czasu wykonania programu. Pozwala to na wykonanie funkcji w określonym czasie niezależnie od czasu wykonania programu.
Dwie kluczowe metody korzystania ze zdarzeń czasowych w JavaScript to:
setTimeout (funkcja, milisekunda)
Ta funkcja wykonuje funkcję wewnątrz, która jest przekazywana jako parametr tylko raz po określonym czasie w milisekundach.
setInterval (funkcja, milisekunda)
Ta funkcja wykonuje funkcję od czasu wykonania i po każdym osiągniętym przedziale czasu. Powtarza wykonywanie funkcji w każdym przedziale czasu.
Teraz przejdźmy dalej i zobaczmy, jak działa SetInterval w JavaScript.
SetInterval w JavaScript
Pierwszy parametr tej funkcji to funkcja do wykonania, a drugi parametr określa odstęp czasu między każdym wykonaniem.
var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}Tutaj document.getElementById pobiera element z który ma id jako „demo”, a funkcja d.toLocaleTimeString () podają aktualny czas z systemu.
Dlatego jest to powtarzane co 1000 milisekund, co odpowiada 1 sek. W ten sposób funkcja jest wykonywana wielokrotnie co 1 sekundę, a zatem czas jest aktualizowany co sekundę.
Jak więc zatrzymać tę egzekucję? Dowiedzmy Się!
Jak zatrzymać wykonanie?
Możemy zatrzymać wykonywanie funkcji setInterval () przy pomocy innej funkcji o nazwie clearInterval ().clearInterval () używa zmiennej zwróconej przez funkcję setInterval ().
Na przykład:
myVar = setInterval (funkcja, milisekundy) clearInterval (myVar)
Poniżej znajduje się przykład, który używa zarówno metody setInterval (), jak i clearInterval (). To uruchamia zegar i zapewnia przycisk do zatrzymania czasu.
Poniżej znajduje się zegar.
Zatrzymaj czas
Kliknij przycisk powyżej, aby zatrzymać czas.
var myVar = setInterval (myTimer, 1000) function myTimer () {var d = new Date () document.getElementById ('demo'). innerHTML = d.toLocaleTimeString ()}
Wynik:
Więcej przykładów z setInterval () i clearInterval ().
Tworzenie dynamicznego paska postępu
#myProgress {width: 100% height: 30px position: względna background-color: #ddd} #myBar {background-color: # 4CAF50 width: 10px height: 30px position: bezwzględna}
Funkcja Kliknij mnie 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 + '%'}}}Wynik:
Początkowe dane wyjściowe
Wyjście po kliknięciu przycisku „Kliknij mnie”.
Przełącz między dwoma tłem
Zatrzymaj przełączanie var myVar = setInterval (setColor, 300) function setColor () {var x = document.body x.style.backgroundColor = x.style.backgroundColor == 'yellow'? 'pink': 'yellow'} function stopColor () {clearInterval (myVar)}Wynik:
Kolor będzie przełączany między żółtym i różowym. Powyższy wynik jest przed kliknięciem przycisku, a poniżej jest po kliknięciu przycisku.
W ten sposób dotarliśmy do końca naszego artykułu SetInterval in JavaScript. Mam nadzieję, że zrozumiałeś, jak działa metoda SetInterval.
Sprawdź przez Edureka. Szkolenie w zakresie certyfikacji w zakresie rozwoju sieci pomoże Ci nauczyć się, jak tworzyć imponujące witryny internetowe przy użyciu HTML5, CSS3, Twitter Bootstrap 3, jQuery i interfejsów API Google oraz wdrażać je w Amazon Simple Storage Service (S3).
Masz do nas pytanie? Wspomnij o tym w sekcji komentarzy na tym blogu, a my skontaktujemy się z Tobą.