Funkcje wywoływane czasowo w JavaScript

JavaScript daje możliwość wywoływania własnej funkcji co określony czas lub po upływie określonego czasu. Jednostką czasu jest milisekunda. Wystarczy pamiętać, że 1 sekunda - 1000 milisekund.

Oto wspomniane metody wraz z przykładami (wewnątrz opisu metod).

JavaScript umożliwia nam oczywiście także wstrzymywanie wymienionych wyżej metod.

A oto prosty przykład wykorzystania metody setInterval().

Listing 3 - Szablon modułu

<div style="width: 600px; height:20px; position: relative;margin: 5px;">
<div style="width: 0px; height:20px; position: absolute; background-color:#440000" id="Bar1"></div><br>
<div style="width: 10px; height:20px; position: absolute; background-color:#550000" id="Bar2"></div><br>
<div style="width: 20px; height:20px; position: absolute; background-color:#660000" id="Bar3"></div><br>
<div style="width: 30px; height:20px; position: absolute; background-color:#770000" id="Bar4"></div><br>
<div style="width: 40px; height:20px; position: absolute; background-color:#880000" id="Bar5"></div><br>
<div style="width: 50px; height:20px; position: absolute; background-color:#990000" id="Bar6"></div><br>
<div style="width: 60px; height:20px; position: absolute; background-color:#AA0000" id="Bar7"></div><br>
<div style="width: 70px; height:20px; position: absolute; background-color:#BB0000" id="Bar8"></div><br>
<div style="width: 80px; height:20px; position: absolute; background-color:#CC0000" id="Bar9"></div><br>
<div style="width: 90px; height:20px; position: absolute; background-color:#DD0000" id="Bar10"></div><br>
<div style="width: 100px; height:20px; position: absolute; background-color:#EE0000" id="Bar11"></div><br>
</div>
<script>
var element = [];
var w = [0,10,20,30,40,50,60,70,80,90,100];
var d = [1,1,1,1,1,1,1,1,1,1,1];
var ile = 11;
for (var i=1; i<ile+1; i++) {element.push(document.getElementById("Bar"+i));}
var id = setInterval(frame, 20);

function frame() {
for (var i=0; i<ile; i++) {
 if (w[i] == 100) {d[i]=-1;} 
	if (w[i] == 0) {d[i]=1;} 
	w[i]=w[i]+d[i]; 
	element[i].style.width = w[i] + '%'; 
 }
}
</script>

Inne zagadnienia z tej lekcji

Ciasteczka (cookies)

Jak w JavaScript obsługiwać ciasteczka (cookies)? Jest to pakiet informacji, które serwer przekazuje przeglądarce internetowej podczas pierwszej wizyty, a także z których korzysta za każdym następnym razem.

Storage

Storage jest wygodniejszą alternatywą dla ciasteczek. Nie jest jednak obsługiwany przez stare wersje przeglądarek. Używanie storage jest trywialnie proste. Możemy zapisać i odczytać dane.

Okna w JavaScript

Okna w JavaScript. Większość przeglądarek domyślnie blokuje otwieranie nowych okien i zakładek z poziomu kodu. W niniejszym artykule omówię działanie okienek, właściwości i metody obiektu Window.

Formularze w JavaScript

formularze w JavaScript. Jeżeli chcemy reagować na to, co użytkownik wpisuje w pola formularza na stronie internetowej, zanim cokolwiek wyśle na serwer, to JavaScript jest w tym momencie nieoceniony.