Co to jest setTimeout i setInterval?

setTimeout wywołuje funkcję zwrotną raz, po zadanym opóźnieniu w milisekundach — setTimeout(callback, delay); setInterval wywołuje ją cyklicznie w stałych odstępach — setInterval(callback, interval). Obie funkcje są wbudowane w środowisko JavaScriptu — przeglądarkę i Node.js. Typowe zastosowania setTimeout: akcje odroczone (zamknięcie powiadomienia po kilku sekundach), limity czasu operacji, debouncing wpisywania. Typowe zastosowania setInterval: zadania cykliczne — odpytywanie API co pół minuty, zegar odświeżany co sekundę, automatyczny zapis. To absolutny elementarz każdego developera JavaScript.

Kiedy setTimeout, a kiedy setInterval?

Podział zastosowań: setTimeout to pojedyncze odroczone wykonanie — po nim nic więcej się nie dzieje; naturalne dla debounce (poczekaj, aż użytkownik skończy pisać), opóźnionych komunikatów i limitów czasu. setInterval to wykonania powtarzane aż do odwołania — polling serwera, zegar, autozapis. Trzecia droga, często najlepsza: rekurencyjny setTimeout, czyli planowanie kolejnego wywołania wewnątrz callbacku — elastyczniejszy od setInterval, bo czeka na zakończenie poprzedniej iteracji zamiast strzelać na ślepo. Nowoczesne uzupełnienia: requestAnimationFrame do animacji (synchronizacja z odświeżaniem ekranu) i AbortController do anulowania operacji asynchronicznych.

Jakie problemy sprawia setInterval?

Grzechy setInterval: nakładanie wykonań — gdy callback trwa dłużej niż interwał, wywołania zaczynają na siebie nachodzić; setInterval nie czeka na zakończenie poprzedniego, throttling w tle — przeglądarki spowalniają timery w nieaktywnych kartach (interwały wydłużane co najmniej do sekundy), dryf — drobne opóźnienia kumulują się w czasie, wycieki pamięci — zapomniany clearInterval trzyma referencje i mieli w tle bez końca. Antidotum — rekurencyjny setTimeout: function poll() { fetch('/api').then(() => setTimeout(poll, 30000)); } — kolejne odpytanie planuje się dopiero po zakończeniu poprzedniego. Dla większości zastosowań to wzorzec zalecany zamiast setInterval.

Jak poprawnie anulować timery?

Mechanika sprzątania: obie funkcje zwracają identyfikator, który przechowuje się do późniejszego odwołania — clearTimeout(id) anuluje zaplanowany setTimeout, clearInterval(id) zatrzymuje działający interwał. Sprzątanie jest krytyczne przy odmontowaniu komponentu i nawigacji — inaczej timery przeżywają swój kontekst i ciekną. Wzorzec reactowy: useEffect(() => { const id = setInterval(cb, 1000); return () => clearInterval(id); }, []) — czyszczenie w funkcji zwracanej z efektu. Zapomniany cleanup to jeden z najczęstszych błędów w komponentach; dla anulowalnych operacji asynchronicznych (fetch) współczesnym uzupełnieniem jest AbortController.

Jakie są dobre praktyki pracy z timerami?

Zbiór zasad: setTimeout do pojedynczych opóźnień, rekurencyjny setTimeout do cykli — zamiast setInterval, zawsze sprzątaj — clearTimeout i clearInterval w cleanupie (useEffect w Reakcie, beforeUnmount w Vue), unikaj magicznych opóźnień — setTimeout(fn, 1) to code smell maskujący prawdziwy problem, nie licz na precyzję — timery JavaScriptu gwarantują minimum opóźnienia, nie jego dokładność, pamiętaj o throttlingu — karty w tle i urządzenia mobilne spowalniają timery dla oszczędności baterii, nowoczesne zamienniki — requestAnimationFrame do animacji, AbortController do anulowania, web workers do zadań w tle, gotowe narzędzia — debounce do pól tekstowych, throttle do zdarzeń scroll i resize (Lodash albo własna implementacja).

Kontakt

Front-end

Czym różnią się setTimeout i setInterval w JavaScript?

Język Javascript posiada wiele interesujących technik i metod, które umożliwiają tworzenie dynamicznych i interaktywnych aplikacji webowych. Dwa takie mechanizmy, o których wspomnimy dzisiaj, to SetTimeout i SetInterval. Pozwalają one na zarządzanie czasem wykonywania różnych operacji. Chociaż obie funkcje są często używane, występują między nimi istotne różnice, których zrozumienie jest kluczem do efektywnego kodowania.

JavaScript

Tomasz Kozon

CEO

11 gru 2023

SetTimeout i SetInterval to dwa wbudowane metody JavaScript, które pozwalają twórcom na manipulowanie czasem i schedulowanie wykonywania kodu. Te metody są często wykorzystywane do tworzenia różnych efektów na stronach internetowych, takich jak animacje, odliczanie, czy aktualizacja danych w czasie rzeczywistym. Chociaż obie funkcje pozwalają na kontrolę nad czasem, są używane w nieco inny sposób. SetTimeout pozwala na uruchomienie określonego kodu tylko raz po określonym czasie, podczas gdy SetInterval uruchamia kod wielokrotnie, w określonych odstępach czasu. Zrozumienie różnic między tymi dwoma metodami jest kluczowe dla efektywnego programowania w JavaScript.

Powiązane case studies

Laptop z serwisem BlueApart — platforma rezerwacji apartamentów nad morzem

Dwucyfrowy wzrost widoczności organicznej i automatyzacja obsługi gości dla operatora apartamentów

Klient: Blueapart

Branża: Booking i hotele / TravelTech

Marketplace premium kosmetyków na 9 rynkach europejskich - Shopify Plus

Klient: Baza Cosmetics

Branża: Beauty i kosmetyczna / BeautyTech

Platforma edukacyjna generująca materiały do nauki programowania z ChatGPT

Klient: Klient (Aplikacja webowa do nauki programowania)

Branża: Edukacja / EdTech

Jak działa SetTimeout? Przykłady i zastosowania

Funkcja 'setTimeout' to metodologia JavaScriptu, która pozwala opóźnić wykonanie konkretnego fragmentu kodu o zdefiniowany przez nas czas, podawany w milisekundach. Kiedy do funkcji SetTimeout przekażemy jako argumenty funkcję oraz opóźnienie, po upływie zadanego czasu, nasza funkcja zostanie wykonana. Przykładem może być sytuacja, w której chcemy pokazać użytkownikowi spersonalizowane powiadomienie po 5 sekundach od wejścia na stronę. W takim przypadku, zastosujemy setTimeout będąc pewni, że dana akcja nie zostanie wykonana od razu, a dopiero po zadanym czasie. Ważne jest jednak, aby pamiętać, że nie blokuje on innych funkcji w JS, a jedynie wprowadza określone opóźnienie w wykonaniu wyznaczonej funkcji.

Powiązana usługa

Web development

Projektujemy i tworzymy dedykowane aplikacje webowe - od MVP, które pozwala szybko zweryfikować pomysł, po rozbudowane platformy i systemy rozwijane przez lata. Budujemy zarówno warstwę frontendową, jak i backend, API, bazy danych, panele administracyjne oraz integracje z zewnętrznymi systemami. Pracujemy m.in. z Next.js, React, Node.js, NestJS, Pythonem, PostgreSQL i MongoDB. Tworzymy rozwiązania dopasowane do konkretnego procesu biznesowego: aplikacje SaaS, systemy wewnętrzne, platformy sprzedażowe, serwisy internetowe, marketplace’y i systemy CMS.

Funkcjonalność SetInterval: Omówienie i zastosowanie

Funkcja setInterval to jedna z podstawowych funkcji czasowych w JavaScript. Jej głównym zadaniem jest wywoływanie określonej funkcji lub fragmentu kodu w regularnych odstępach czasu, aż do momentu zatrzymania jej przez clearInterval lub zamknięcie strony. Jest to zupełnie inaczej niż w przypadku funkcji setTimeout, której zadaniem jest jednokrotne wykonanie kodu po upływie określonego czasu. Za jego pomocą, można na przykład tworzyć animacje, odświeżanie danych czy cykliczną walidację formularzy. Choć jest potężnym narzędziem, wymaga od programistów ostrożności, aby nie doprowadzić do niechcianych pętli nieskończoności.

SetTimeout i SetInterval w JavaScript

Porównanie SetTimeout i SetInterval: Kluczowe różnice

Pomimo, że zarówno SetTimeout, jak i SetInterval są wbudowanymi funkcjami JavaScript, służącymi do zarządzania czasem, istnieją między nimi zasadnicze różnice. SetTimeout jest funkcją, która pozwala na wykonanie kodu jednorazowo po określonym czasie opóźnienia. W przeciwnym razie, SetInterval to funkcja, która wykonuje określony kod wielokrotnie w równych odstępach czasu, dopóki nie zostanie jasno zatrzymana za pomocą funkcji clearInterval. Te różnice wpływają na wybór metody w zależności od specyfiki zadania. Przykładowo, SetTimeout jest często stosowany dla jednokrotnych zadań opóźnionych, takich jak ukrywanie wiadomości po upływie 5 sekund, podczas gdy SetInterval jest idealny dla operacji, które muszą być powtarzane co pewien czas, jak na przykład aktualizowanie licznika w czasie rzeczywistym.

Najczęstsze błędy i dobre praktyki przy stosowaniu SetTimeout i SetInterval

Wśród najczęstszych błędów popełnianych przy użyciu setTimeout i setInterval w JavaScript, często znajduje się brak uwzględnienia asynchronicznej natury tych funkcji. Oznacza to, że nie blokują one wykonywania reszty skryptu, co może prowadzić do nieprzewidywalnych wyników, jeśli tego nie weźmie się pod uwagę. Innym powszechnym błędem jest niewłaściwe stopowanie (czy to poprzez clearTimeout, czy clearInterval) zainicjowanych operacji opóźniających. Dobrą praktyką jest zawsze jasne definiowanie, kiedy operacje powinny być zatrzymane, aby uniknąć niepotrzebnego zużycia zasobów. Również, ważne jest aby pamiętać, że czas w setTimeout i setInterval jest podawany w milisekundach, a nie sekundach, co również może prowadzić do niezrozumiałości. Prawidłowe stosowanie tych funkcji wymaga zrozumienia i uwzględnienia ich specyfiki w kontekście asynchronicznego języka, jakim jest JavaScript.

FAQ

FAQ – setTimeout vs setInterval w JavaScript

setTimeout wywołuje funkcję zwrotną raz, po zadanym opóźnieniu w milisekundach — setTimeout(callback, delay); setInterval wywołuje ją cyklicznie w stałych odstępach — setInterval(callback, interval). Obie funkcje są wbudowane w środowisko JavaScriptu — przeglądarkę i Node.js. Typowe zastosowania setTimeout: akcje odroczone (zamknięcie powiadomienia po kilku sekundach), limity czasu operacji, debouncing wpisywania. Typowe zastosowania setInterval: zadania cykliczne — odpytywanie API co pół minuty, zegar odświeżany co sekundę, automatyczny zapis. To absolutny elementarz każdego developera JavaScript.
Podział zastosowań: setTimeout to pojedyncze odroczone wykonanie — po nim nic więcej się nie dzieje; naturalne dla debounce (poczekaj, aż użytkownik skończy pisać), opóźnionych komunikatów i limitów czasu. setInterval to wykonania powtarzane aż do odwołania — polling serwera, zegar, autozapis. Trzecia droga, często najlepsza: rekurencyjny setTimeout, czyli planowanie kolejnego wywołania wewnątrz callbacku — elastyczniejszy od setInterval, bo czeka na zakończenie poprzedniej iteracji zamiast strzelać na ślepo. Nowoczesne uzupełnienia: requestAnimationFrame do animacji (synchronizacja z odświeżaniem ekranu) i AbortController do anulowania operacji asynchronicznych.
Grzechy setInterval:
nakładanie wykonań — gdy callback trwa dłużej niż interwał, wywołania zaczynają na siebie nachodzić; setInterval nie czeka na zakończenie poprzedniego,
throttling w tle — przeglądarki spowalniają timery w nieaktywnych kartach (interwały wydłużane co najmniej do sekundy),
dryf — drobne opóźnienia kumulują się w czasie,
wycieki pamięci — zapomniany clearInterval trzyma referencje i mieli w tle bez końca.
Antidotum — rekurencyjny setTimeout: function poll() { fetch('/api').then(() => setTimeout(poll, 30000)); } — kolejne odpytanie planuje się dopiero po zakończeniu poprzedniego. Dla większości zastosowań to wzorzec zalecany zamiast setInterval.
Mechanika sprzątania: obie funkcje zwracają identyfikator, który przechowuje się do późniejszego odwołania — clearTimeout(id) anuluje zaplanowany setTimeout, clearInterval(id) zatrzymuje działający interwał. Sprzątanie jest krytyczne przy odmontowaniu komponentu i nawigacji — inaczej timery przeżywają swój kontekst i ciekną. Wzorzec reactowy: useEffect(() => { const id = setInterval(cb, 1000); return () => clearInterval(id); }, []) — czyszczenie w funkcji zwracanej z efektu. Zapomniany cleanup to jeden z najczęstszych błędów w komponentach; dla anulowalnych operacji asynchronicznych (fetch) współczesnym uzupełnieniem jest AbortController.
Zbiór zasad:
setTimeout do pojedynczych opóźnień, rekurencyjny setTimeout do cykli — zamiast setInterval,
zawsze sprzątaj — clearTimeout i clearInterval w cleanupie (useEffect w Reakcie, beforeUnmount w Vue),
unikaj magicznych opóźnień — setTimeout(fn, 1) to code smell maskujący prawdziwy problem,
nie licz na precyzję — timery JavaScriptu gwarantują minimum opóźnienia, nie jego dokładność,
pamiętaj o throttlingu — karty w tle i urządzenia mobilne spowalniają timery dla oszczędności baterii,
nowoczesne zamienniki — requestAnimationFrame do animacji, AbortController do anulowania, web workers do zadań w tle,
gotowe narzędzia — debounce do pól tekstowych, throttle do zdarzeń scroll i resize (Lodash albo własna implementacja).

Formularze są jednym z kluczowych elementów każdej strony internetowej i aplikacji webowej, a ich poprawne działanie ma bezpośredni wpływ na doświadczenie użytkownika. Walidacja danych pozwala uniknąć błędów, niekompletnych zgłoszeń oraz niepotrzebnej komunikacji z serwerem. Parsley.js to lekka i prosta w użyciu biblioteka JavaScript, która umożliwia skuteczną walidację formularzy po stronie klienta.

Tomasz Kozon

28 lis 2025