setTimeout()
Uruchamia funkcję jeden raz, po upływie podanej liczby milisekund.
- Zwraca
- Identyfikator timera, który możesz przekazać do
clearTimeout().
Przykład
#console.log('1. Start')
setTimeout(() => {
console.log('3. Minęło 500 ms')
}, 500)
console.log('2. Kod nie czeka na timer')Definicja i zastosowanie
#Funkcja setTimeout() planuje wywołanie podanej funkcji po określonej liczbie milisekund. Nie wstrzymuje programu: kod zapisany dalej wykona się od razu, a zaplanowana funkcja później, gdy minie czas i przeglądarka nie będzie zajęta innym kodem.
Zwraca identyfikator timera. Przekazując go do clearTimeout(), anulujesz wywołanie, które jeszcze się nie odbyło. Na tym opiera się na przykład wyszukiwanie uruchamiane dopiero wtedy, gdy użytkownik przestanie pisać (tak zwany debounce).
Opóźnienie to minimalny czas oczekiwania, a nie gwarancja. Nawet setTimeout(fn, 0) poczeka, aż skończy się bieżący kod i wszystkie oczekujące reakcje obietnic. W kartach działających w tle przeglądarka może dodatkowo wydłużać opóźnienia.
Składnia
#setTimeout(callback)
setTimeout(callback, delay)
setTimeout(callback, delay, arg1, arg2, …)
clearTimeout(timeoutId)Parametry
#callback
function
Funkcja do wywołania po upływie czasu.delay
opcjonalny, liczba
Opóźnienie w milisekundach. Domyślnie 0.arg1…argN
opcjonalne
Argumenty przekazane do funkcjicallback.
Więcej przykładów
#const timer = setTimeout(() => console.log('Czas minął!'), 1000)
setTimeout(() => {
console.log('Odpowiedź wysłana na czas')
clearTimeout(timer)
}, 300)setTimeout(() => console.log('3. setTimeout z opóźnieniem 0'), 0)
Promise.resolve().then(() => console.log('2. then() obietnicy'))
console.log('1. Kod synchroniczny')Reakcje obietnic trafiają do kolejki mikrozadań, która jest opróżniana przed uruchomieniem kolejnego timera, nawet z opóźnieniem 0.
function debounce(fn, ms) {
let timer
return (...args) => {
clearTimeout(timer)
timer = setTimeout(() => fn(...args), ms)
}
}
const search = debounce((text) => console.log('Szukam:', text), 300)
search('j')
search('ja')
search('jav')
search('java')Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Przekazuj funkcję, a nie jej wynik:
setTimeout(showHint, 1000), a niesetTimeout(showHint(), 1000). - Zapisuj identyfikator timera, jeśli możesz chcieć go anulować, np. gdy użytkownik opuści widok przed jego uruchomieniem.
- Do czekania w funkcji
asyncopakuj timer w obietnicę:const wait = (ms) => new Promise((r) => setTimeout(r, ms)).
Powiązane hasła
#- setInterval()Wywołuje funkcję cyklicznie, co podany odstęp czasu, aż do zatrzymania przez clearInterval().
- PromiseObiekt reprezentujący wynik operacji, który pojawi się w przyszłości: wartość przy sukcesie albo błąd.
- awaitWstrzymuje funkcję async do czasu rozstrzygnięcia obietnicy i zwraca jej wartość albo rzuca jej błąd.
- () => {}Funkcja strzałkowa (arrow function): krótszy zapis funkcji, bez własnego this, z niejawnym return dla jednego wyrażenia.
Widzisz błąd albo brakuje przykładu? Napisz do nas.