JavaScript: setTimeout

0:00W tej i w kolejnej lekcji pomówimy sobie o tak

0:03zwanych timera w języku JavaScript i pokażę Ci, jak możemy opóźnić wykonanie

0:07jakiegoś kodu lub też sprawić, żeby ten kod był wykonywany cyklicznie.

0:12Na początek utworzymy sobie funkcję, którą nazwę sayHello.

0:15Będzie to bardzo prosta funkcja robiąca po prostu console.log

0:18Witaj świecie

0:21i chciałbym teraz wywołać tę funkcję po 3 sekundach.

0:24Czyli wiemy, że jeżeli będzie się

0:25wczytywać kod tej strony, wczyta się ten skrypt

0:28funkcja zostanie utworzona,

0:30jeszcze jej nie wywołałem, bo musiałbym to

0:31zrobić w ten sposób i właśnie chcę ją wywołać dopiero za jakiś czas.

0:35W języku JavaScript mamy do tego dwie funkcje.

0:38Pierwszą pokażę Ci w tej lekcji, drugą w kolejnej,

0:41natomiast chciałbym wspomnieć o tym, że te

0:43funkcje nie są częścią specyfikacji języka JavaScript, ale są dostępne w środowisku

0:48przeglądarki internetowej, a także w przypadku Node.js. Czyli w zasadzie praktycznie

0:53wszędzie, gdzie można wykonywać kod JavaScript

0:55te funkcje powinny być dostępne, ale same w sobie nie są częścią języka JavaScript.

0:59I funkcja, o której chcę powiedzieć w tej lekcji jest to setTimeout.

1:03Mówimy, że chcemy ustawić taki Timeout i

1:05tu musimy przekazać funkcję, którą chcemy wywołać

1:08po jakimś czasie. Więc przekażę referencje do sayHello.

1:11I to jest bardzo ważne, że przekazujemy ją

1:13w ten sposób, a nie wywołujemy jej, bo wtedy podstawili byśmy w to miejsce

1:17to co ta funkcja zwraca.

1:19Ta funkcja nic nie zwraca, więc podstawili byśmy tutaj undefined.

1:22My natomiast chcemy wskazać na funkcję, która ma się wykonać,

1:26natomiast jako drugi parametr podajemy

1:28tutaj czas w milisekundach po jakim ma się wywołać ta funkcja.

1:32Podam sobie 3000 jak 3 sekundy,

1:34no i po przejściu na stronę ona się

1:36odświeży i po trzech sekundach tutaj powinniśmy zobaczyć Witaj świecie,

1:40I tak też się stało.

1:42Oczywiście do tej funkcji możemy tutaj

1:43podawać również funkcje bezpośrednio, bo to nie ma żadnego znaczenia.

1:47W ten sposób utworzymy tutaj funkcję anonimową i podstawimy ją do setTimeout

1:51lub funkcja może być utworzona wcześniej i przekazujemy do niej referencję.

1:55Co ważne, Timeout można również czyścić,

1:58czyli możemy powiedzieć, że chcemy wykonać tę funkcję za 3 sekundy, ale zanim ten

2:02czas upłynie, możemy anulować taki Timeout tak, żeby on się nie wykonał.

2:07I teraz jak to zrobić?

2:08Mam na stronie taki przycisk Anuluj

2:10timeout i jeszcze w tym kursie nie mówiliśmy o tym jak przypisywać zdarzenia

2:13kliknięcia, ale zrobię to w najprostszy możliwy sposób, a później jeszcze w tym

2:17kursie dokładnie Ci to wszystko wytłumaczę.

2:19Więc na stronie mamy taki przycisk

2:20identyfikatorem cancel i mogę się do niego odwołać poprzez document.querySelector

2:27cancel i będę chciał do niego przypisać onclick funkcję, która się wykona.

2:32Czyli ta funkcja się wykona w momencie kiedy klikniemy w ten przycisk.

2:35I co będę chciał zrobić w tej funkcji?

2:37Będę chciał anulować ten timeout.

2:39Ale żeby móc go anulować musimy mieć do niego referencję.

2:42I co ważne funkcja setTimeout zwraca nam taką referencję, taki uchwyt do tego

2:47timeout, więc możemy sobie go zapisać w takiej stałej

2:51i teraz pod timeout będzie się znajdowała właśnie taka referencja.

2:55I teraz żeby taki timeout wyczyścić zanim on się zdąży wykonać

2:59mamy do tego specjalną funkcję, która

3:01nazywa się clearTimeout i jej musimy przekazać tą referencję.

3:05Czyli przekazuję jej dokładnie to, co tutaj zostało zwrócone.

3:08Zobaczmy jak to będzie wyglądać.

3:10Strona się odświeżyła, jeżeli kliknę anuluj. OK, nie zdążyłem.

3:13Zróbmy jeszcze raz.

3:14Klikam Anuluj timeout i po trzech sekundach nic tutaj się nie wydarzyło.

3:19Czyli anulowaliśmy wywołanie tej funkcji ustawione w tym miejscu.

3:23To zatem tyle jeżeli chodzi o setTimeout.

3:25To może być w wielu sytuacjach przydatne,

3:27jak widzisz w ten sposób możemy opóźnić sobie

3:30wykonanie jakiejś funkcji, ale także możemy taki timeout anulować.