JavaScript: setInterval

0:00W poprzedniej lekcji pokazałem Ci jak

0:02ustawić za pomocą set Timeout wywołanie jakiejś funkcji po określonym czasie. I tam

0:06to wywołanie działo się wyłącznie jeden raz.

0:09Czyli jeżeli powiedzieliśmy, że po trzech sekundach funkcja ma się wykonać, to ona

0:12się wykonała po trzech sekundach i to wszystko.

0:15Natomiast mamy również drugą funkcję, która nazywa się setInterval

0:18i jej możemy powiedzieć, że chcemy naszą

0:20funkcję wywoływać co określony czas, czyli np.

0:24co sekundę albo co 3 sekundy, ale w

0:26zasadzie w nieskończoność, chyba, że ją anulujemy w odpowiedni sposób

0:29co będę chciał Ci też za chwilę pokazać.

0:32Na początek zrobimy sobie coś takiego, że ustawię zmienną counter na wartość 5 i

0:37następnie będę chciał stworzyć taką funkcję, która będzie zmieniać tę wartość

0:41i zrobimy po prostu takie odliczanie. Więc stworzymy sobie

0:46funkcję wewnątrz setInterval bo setInterval to jest właśnie ta funkcja

0:50wbudowana, która będzie dostępna na platformach wykonujących język JavaScript,

0:54w poprzedniej lekcji było to set Timeout teraz setInterval i tutaj też przekazujemy

0:58funkcję, więc ją stworzę w taki sposób po prostu liniowy.

1:01I ta funkcja będzie wykonywana co określony czas.

1:04Chciałbym ją wykonywać co 1000 milisekund, czyli co sekundę.

1:08I co tutaj będziemy chcieli zrobić?

1:09Będę chciał wyświetlić console.log counter

1:11minus minus. To sprawi, że zostanie na początku tutaj wyświetlone.

1:155 wartość zostanie zmniejszona do 4 itd.

1:19Zobaczmy co na stronie się wydarzy.

1:21Widzimy tutaj 5 4 3 2 1 0 no i co ważne to będzie w nieskończoność

1:28tutaj szło, dlatego, że nigdzie tego counter nie zatrzymujemy.

1:32I podobnie jak w poprzedniej lekcji pokazałem Ci metodę clearTimeout

1:36podobnie mamy metodę clearInterval. Więc

1:38jeżeli sobie zapiszemy odwołanie do tego interwału jakiejś stałej np.

1:42interval, to teraz wewnątrz tej funkcji możemy sobie zrobić takiego if.

1:47Czyli możemy tutaj powiedzieć jeżeli counter jest mniejszy od zera

1:55to chcemy zrobić clearInterval to jest właśnie ta funkcja

1:58wbudowana i przekazujemy jej referencję do tego interwału.

2:01W przeciwnym wypadku będziemy chcieli wyświetlić counter.

2:05Zobaczmy jak to będzie wyglądać.

2:07Odświeżyła się strona, mamy 5

2:084 3 2 1 0 -1 ok.

2:15Czyli powinniśmy tutaj jeszcze to zamienić.

2:18To jest tylko kwestia tego warunku.

2:19Jeżeli zrobimy w ten sposób, to już powinno być wszystko w porządku.

2:22Teraz powinniśmy obliczyć do zera i zakończyć.

2:27Dokładnie tak się stało.

2:29Jak zatem widzisz, za pomocą setInterval

2:31możesz określić co jaki czas ma się wykonywać Twoja funkcja.

2:35Natomiast dobrą praktyką wśród

2:36programistów JavaScript jest w zasadzie nieużywanie setInterval

2:40jeżeli nie musimy

2:41a korzystanie z setTimeout w taki rekurencyjny sposób

2:44co będę chciał Ci teraz pokazać i za moment omówię dlaczego tak właśnie jest.

2:48Czyli zróbmy sobie coś takiego, że stworzę

2:50funkcję, którą nazwę tick jak tyknięcie i będziemy chcieli ją wykonywać co sekundę.

2:56W środku będziemy robić console.log

2:58counter minus minus, ale to co mamy u góry wykomentuje żeby ten kod się nie uruchamiał.

3:03Czyli będę chciał wyświetlić counter i zmniejszyć jego wartość.

3:05Natomiast ja tej funkcji nigdzie jeszcze nie wywołałem.

3:08Musimy ją sobie wywołać.

3:10Ale jak dobrze wiesz ona się wykona tylko raz, a nie będzie wykonywana co sekundę.

3:14Więc co my tutaj możemy zrobić?

3:16Możemy wewnątrz takiej funkcji powiedzieć,

3:17że jeżeli counter jest większy lub równy 0, to chcemy raz jeszcze wywołać tę

3:24funkcję, ale z użyciem setTimeout. Czyli setTimeout(tick, 1000).

3:31I już tłumaczę o co chodzi.

3:32Teraz tę funkcję wywołujemy, więc wejdźmy

3:34sobie do tej funkcji, ona nam wyświetli 5 i zmniejszy wartość do 4.

3:38Sprawdzimy czy 4 jest większe lub równe 0. Zgadza się.

3:41Więc ustaw Timeout na tę samą funkcję za

3:44sekundę, czyli za sekundę wpadamy znowu do tej samej funkcji,

3:48bo ten Timeout ustawia nam wykonanie

3:50funkcji tylko raz, więc za sekundę ona się jednorazowo wywoła i sprawdzimy,

3:54mamy tutaj czwórkę, więc czwórkę wyświetlimy, zmniejszymy, znowu sprawdzimy

3:58czy 3 jest większe od 0, większe lub równe,

4:02znowu ustawimy Timeout. I za którymś razem jak ta funkcja się wywoła, to ten warunek

4:07nie będzie już prawdziwy, a więc Timeout nie ustawi się raz jeszcze.

4:10Więc w ten sposób zrobiliśmy coś, co działa tak samo jak setInterval,

4:14ale jest jedna istotna różnica, o której powiem za moment,

4:17najpierw jednak sobie to przetestujmy. Od razu po odświeżeniu strony widać, że wszystko

4:20działa i tak naprawdę wykorzystaliśmy do tego setTimeout, a nie setInterval.

4:26No i na koniec powiem Ci dlaczego to jest

4:28polecany sposób, żeby korzystać z czegoś takiego, a nie z setInterval.

4:31W zasadzie jeżeli te interwały będziesz

4:33miał takie sekundowe to nie ma to większego znaczenia.

4:36Natomiast czasami ustawiało się czy

4:38ustawia się takie bardzo drobne Timeout jak na przykład 50 milisekund,

4:43szczególnie dawniej to było bardzo

4:44popularne, aby na stronie sprawdzić czy coś już się wczytało,

4:47kiedy nie mieliśmy jakichś innych metod,

4:48to np. co 50 milisekund wyszukiwaliśmy jakiegoś elementu na stronie itd.

4:53I teraz co się okazuje?

4:54Jeżeli ustawimy Interval,

4:56przyjmijmy tutaj tą sekundę, ale to nie ma znaczenia

4:59to będzie ta funkcja uruchamiana zawsze co sekundę.

5:03I gdyby w tej funkcji był jakiś kod, który wymaga większego czasu, żeby po prostu

5:09był wykonany większego niż sekundę, to raczej trudno sobie wyobrazić.

5:12Musielibyśmy tutaj mieć naprawdę jakieś bardzo ciężkie obliczenia.

5:16Nie wiem jak ta funkcja musiałaby

5:17wyglądać, ale jeżeli tutaj będzie jakiś bardzo drobny czas, to jest możliwe, że

5:21nie zdąży się jeszcze ta funkcja wykonać, a ten Interval znowu po tym czasie

5:26upycha nam, można powiedzieć kolejną taką funkcję do wywołania i kolejną i kolejną.

5:31Natomiast w przypadku setTimeout wygląda

5:32to inaczej, bo my tutaj robimy funkcję tick.

5:35Tutaj jest kod, który ma się wykonać.

5:37Załóżmy, że tu byłoby więcej kodu, jakieś ciężkie obliczenia.

5:40Więc dopiero jak ten kod się wykona,

5:42załóżmy, że my chcieliśmy to wykonywać co 50 milisekund, ale że ten kod się wykonywał

5:46100 milisekund, czyli po prostu wykonywał się dłużej niż ten interwał, który

5:50chcieliśmy ustawić, to nic tutaj się złego nie stanie, dlatego, że dopiero jak ten

5:54kod się wykona dojdziemy do momentu, gdzie jeszcze raz ustawiamy ten Timeout.

5:58Czyli można powiedzieć, że to kolejne

5:59tyknięcie zawsze będzie po tym jak dany kod już się wykonał.

6:04Czyli może to mieć znaczenie w przypadku bardzo tutaj drobnych czasów.

6:08Gdybyśmy ustawili np.

6:0950 milisekund i chcieli to wykonywać co 50 milisekund.

6:13Lepiej wtedy korzystać z setTimeout.

6:15Oczywiście nie mamy gwarancji, że co 50

6:17milisekund wykona się nasz kod, bo jeżeli obliczenia w takiej funkcji zajmą 70

6:21milisekund, czy 100 milisekund oczywiście jest to możliwe, to ten kod będzie

6:25wykonywany rzadziej, ale będzie to oczywiście bardziej wydajne, natomiast w

6:29tym przypadku on byłby upychany na kolejkę do wykonania co te 50 milisekund

6:34co wcale nie oznacza, że byłby równocześnie wykonywany.

6:37Mieli byśmy po prostu wiele funkcji, które zapychają nam tzw.

6:41stos i byłyby one po kolei wykonywane.

6:44Jak zatem widać, wydaje się, że taka

6:46subtelna różnica, ale w niektórych sytuacjach może mieć znaczenie.

6:49Ja z tego powodu przywykłem do korzystania po prostu z setTimeout

6:53kiedy chcę skorzystać z setInterval. W odpowiedni sposób, tworzę sobie taką

6:56funkcję z jakimś warunkiem i wykonuję w niej setTimeout.

7:00Więc poeksperymentuj sobie z tym i zapamiętaj jaka tutaj jest różnica.

7:04Zapamiętaj też, że to nie oznacza, że nie powinieneś korzystać z setInterval.

7:08Jeżeli ustawiasz interwały takie jak np.

7:10sekundę, nie ma z tym żadnego problemu.