Do czego służy setInterval w JavaScript?

By /

JavaScript

setInterval() to fundamentalna funkcja w języku JavaScript, która pozwala na cykliczne wykonywanie określonej funkcji lub bloku kodu w równych odstępach czasu. Jest to niezwykle przydatne narzędzie w tworzeniu dynamicznych interfejsów użytkownika, animacji, odświeżania danych bez konieczności ręcznego odświeżania strony przez użytkownika i wielu innych zadań wymagających regularnego wykonania kodu.

Przykład użycia setInterval wraz z HTML

Poniżej znajduje się prosty przykład demonstrujący, jak można wykorzystać setInterval do stworzenia zegara w czasie rzeczywistym na stronie internetowej. Przykład składa się z kodu HTML i JavaScript, które są zintegrowane w jednym pliku.

Kod HTML i JavaScript
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Zegar w czasie rzeczywistym</title>
</head>
<body>
    <h2>Aktualny czas:</h2>
    <div id="clock"></div>

    <script>
        // Funkcja aktualizująca czas co sekundę
        function updateClock() {
            const now = new Date(); // Uzyskanie aktualnej daty i czasu
            const hours = now.getHours(); // Godziny
            const minutes = now.getMinutes(); // Minuty
            const seconds = now.getSeconds(); // Sekundy
            
            // Formatowanie czasu do wyświetlenia
            const timeString = `${hours}:${minutes}:${seconds}`;
            
            // Wyświetlanie zaktualizowanego czasu na stronie
            document.getElementById('clock').textContent = timeString;
        }
        
        // Ustawienie interwału wywoływania funkcji updateClock co 1000ms (1 sekunda)
        setInterval(updateClock, 1000);
    </script>
</body>
</html>

Zastosowania setInterval

Funkcja setInterval ma szerokie zastosowanie, w tym:

  • Tworzenie zegarów i timerów na stronie.
  • Cykliczne odświeżanie danych wyświetlanych użytkownikowi, np. wyniki na żywo.
  • Implementacja prostych animacji, jak np. przewijanie tekstu lub obrazków.
  • Symulacja procesów w czasie rzeczywistym, np. wzrost roślin w grach.

Podsumowanie

setInterval jest potężnym narzędziem w arsenale każdego programisty JavaScript, umożliwiającym wykonywanie funkcji w regularnych odstępach czasu. Dzięki temu, można tworzyć interaktywne i dynamiczne aplikacje webowe, które są atrakcyjne dla użytkownika i oferują bogate doświadczenie bez konieczności ciągłego interweniowania ze strony użytkownika. Ważne jest jednak, aby używać setInterval z rozwagą, ponieważ niekontrolowane i nadmierne użycie tej funkcji może prowadzić do problemów z wydajnością strony lub aplikacji.

Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs video JavaScript w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.

Powiązane artykuły

Scroll to Top