Programowanie w JavaScript Rusz głową!

434

Rozdział 9.

Funkcja setTimeout

Jak działa funkcja setTimeout?

… 6, 5, 4, 3, 2, 1, 0.

:PRPHQFLH]DNRĚF]HQLD

ZF]\W\ZDQLDVWURQ\Z\NRQXMHP\

GZLHRSHUDFMHGHILQLXMHP\

IXQNFMĐRQD]ZLHtimerHandler oraz

Z\ZRâXMHP\IXQNFMĐVHW7LPHRXW

NWyUDSRPLOLVHNXQGZ\JHQHUXMH

]GDU]HQLHLQIRUPXMċFHRXSâ\ZLH

]DGDQHJRRNUHVXF]DVX.LHG\WR

QDVWċSL]RVWDQLHZ\ZRâDQDSURFHGXUD

REVâXJLWHJR]GDU]HQLD

1

function timerHandler() {

alert(”Hej! I co tak siedzisz, gapiÈc siÚ na ekran? Zröb coĂ!”);

}

No dobrze, czas brać się do

roboty. Mam tu licznik czasu, który ma

odmierzyć 5000 milisekund, i procedurę

obsługi, którą należy wykonać po

upływie tego czasu.

3RGF]DVJG\OLF]QLNRGOLF]D

XSâ\ZF]DVXSU]HJOċGDUND

Z\NRQXMHVZRMHVWDQGDUGRZH

G]LDâDQLD

2

.LHG\OLF]QLNGRWU]HGRZDUWRĤFL

SU]HJOċGDUNDZ\ZRâDSURFHGXUĐREVâXJL

]GDU]HQLD

3

Upłynęło 5000

milisekund, odliczanie

zostało zakończone,

wywołajmy zatem

procedurę obsługi.

Procedura

obsługi została wykonana,

mogę już zapomnieć o tym

liczniku czasu.

=RVWDMHZ\ZRâDQDSURFHGXUDREVâXJLNWyUD

Z\ĤZLHWODRNQRGLDORJRZH]NRPXQLNDWHP

4

5000, 4999, 4998…

Przeglądarka nadzoruje

pracę wszystkich

liczników czasu (owszem,

może ich być więcej

niż jeden) i zarządza

skojarzonymi z nimi

procedurami obsługi

zdarzeń, które trzeba

będzie wywołać.

Zdarzenie zostaje wygenerowane, kiedy licznik zakończy

odmierzanie podanego okresu czasu. Przeglądarka

wykonuje procedurę obsługi zdarzenia i wywołuje

przekazaną funkcję.

Kiedy przeglądarka wykona naszą

procedurę obsługi, zostanie

wyświetlone to okno dialogowe!

Licznikami czasu

zarządza Twoja

przeglądarka.

Teraz spróbujemy dokładnie przeanalizować, co właściwie

się stało.

jesteś tutaj

435

Programowanie asynchroniczne

Dokładnie! Czy pamiętasz, jak na początku tego rozdziału napisaliśmy, iż

czytając go, poczujesz, że nie jesteśmy już w Kansas? No cóż, to jest właśnie

ten moment naszego filmu, w którym obraz z czarno-białego zmienia się na

kolorowy. Jednak wróćmy do pytania. Owszem, zdefiniowaliśmy funkcję,

a następnie przekazaliśmy ją w wywołaniu funkcji

VHW7LPHRXW

(która

w rzeczywistości jest metodą).

setTimeout(timeHandler, 50000);

Dlaczego tak robimy i co to oznacza? Zastanówmy się nad tym: działanie

funkcji

VHW7LPHRXW

polega na utworzeniu licznika czasu i skojarzeniu

z nim procedury obsługi. Procedura ta jest wykonywana, kiedy licznik

odmierzy zadany okres czasu. Aby poinformować funkcję

VHW7LPHRXW

, jaką

procedurę należy wykonać,

przekazujemy do niej referencję do funkcji. Funkcja

VHW7LPHRXW

zapisze tę referencję, by użyć jej później, kiedy upłynie zdany

okres czasu.

Jeśli pomyślisz: „To ma sens”, to świetnie. Z drugiej strony, możesz sobie

pomyśleć: „Przepraszam? Przekazywać funkcję do funkcji? Też coś!”. W takim

przypadku masz zapewne doświadczenia w korzystaniu z takich języków

jak C lub Java, w których

podobne przekazywanie jednych funkcji do drugich nie

jest czymś powszechnie spotykanym

. No cóż… W języku JavaScript to normalne;

co więcej, możliwość takiego przekazywania funkcji jest niezwykle użytecznym

narzędziem, zwłaszcza w kontekście pisania kodu reagującego na zdarzenia.

Jednak najprawdopodobniej myślisz sobie: „Chyba to rozumiem, ale nie

jestem pewny”. Jeśli tak, nie przejmuj się. Na razie wyobraź sobie, że do

funkcji

VHW7LPHRXW

przekazujesz referencję do funkcji, która ma zostać

wykonana po upływie zadanego okresu czasu. W następnym rozdziale znacznie

dokładniej opiszemy funkcje oraz ich możliwości (takie jak przekazywanie ich

do innych funkcji). Zatem te informacje powinny Ci na razie wystarczyć.

Czy ja dobrze zrozumiałem:

kiedy używamy funkcji setTimeout,

przekazujemy jedną funkcję

w wywołaniu drugiej?

A oto i ona, referencja do naszej funkcji

jest przekazywana do funkcji setTimeout

(czyli innej funkcji).