setInterval()
Wywołuje funkcję cyklicznie, co podany odstęp czasu, aż do zatrzymania przez clearInterval().
- Zwraca
- Identyfikator interwału do użycia w
clearInterval().
Przykład
#let seconds = 3
const countdown = setInterval(() => {
console.log(seconds)
seconds -= 1
if (seconds === 0) {
clearInterval(countdown)
console.log('Start misji!')
}
}, 300)Definicja i zastosowanie
#Funkcja setInterval() uruchamia podaną funkcję wielokrotnie, za każdym razem po upływie tego samego odstępu w milisekundach. Pierwsze wywołanie następuje dopiero po pierwszym odstępie, a nie od razu.
Zwraca identyfikator, który przekazujesz do clearInterval(), żeby zatrzymać powtarzanie. Bez tego funkcja będzie wywoływana w nieskończoność, nawet gdy nikt już nie potrzebuje jej wyników. Zapomniany interwał to częsta przyczyna wycieków pamięci i trudnych do znalezienia błędów.
Odstęp nie jest idealnie dokładny. Gdy przeglądarka jest zajęta albo karta działa w tle, wywołania mogą się opóźniać. W licznikach czasu obliczaj więc upływ na podstawie Date.now(), a do animacji używaj requestAnimationFrame().
Składnia
#const intervalId = setInterval(callback, delay)
setInterval(callback, delay, arg1, arg2, …)
clearInterval(intervalId)Parametry
#callback
function
Funkcja wywoływana codelaymilisekund.delay
liczba
Odstęp między wywołaniami w milisekundach.arg1…argN
opcjonalne
Argumenty przekazywane do funkcji przy każdym wywołaniu.
Więcej przykładów
#let progress = 0
const loader = setInterval(() => {
progress += 25
console.log(`Ładowanie: ${progress}%`)
if (progress >= 100) clearInterval(loader)
}, 200)let attempt = 1
function checkStatus() {
console.log(`Sprawdzam status, próba ${attempt}`)
attempt += 1
if (attempt <= 3) setTimeout(checkStatus, 200)
}
checkStatus()Kolejne wywołanie jest planowane dopiero po zakończeniu poprzedniego, więc wywołania nigdy się nie nakładają. To dobry wzór przy odpytywaniu serwera, którego odpowiedź może trwać różnie długo.
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
#- Zawsze zapisuj identyfikator i wywołuj
clearInterval(), gdy powtarzanie nie jest już potrzebne, np. po zakończeniu odliczania lub opuszczeniu widoku. - Jeśli pojedyncze wywołanie może trwać dłużej niż odstęp (np. zapytanie do serwera), użyj łańcucha
setTimeout(), żeby wywołania się nie nakładały. - Do płynnych animacji używaj
requestAnimationFrame(), a niesetInterval().
Powiązane hasła
#- setTimeout()Uruchamia funkcję jeden raz, po upływie podanej liczby milisekund.
- PromiseObiekt reprezentujący wynik operacji, który pojawi się w przyszłości: wartość przy sukcesie albo błąd.
- DateObiekt reprezentujący konkretny moment w czasie, z metodami do odczytu i zmiany daty oraz godziny.
- () => {}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.