Różnice między setInterval a setTimeout w JavaScript

By /

JavaScript

W JavaScript, zarówno setInterval jak i setTimeout są wbudowanymi funkcjami czasowymi, które pozwalają na wykonanie kodu po określonym czasie. Choć na pierwszy rzut oka mogą wydawać się podobne, służą do różnych celów i działają w odmienny sposób. Rozumienie różnic między tymi funkcjami jest kluczowe dla efektywnego zarządzania czasem i zdarzeniami w aplikacjach JavaScript.

Różnice kluczowe

  • setTimeout wywołuje funkcję dokładnie raz po określonym czasie (w milisekundach).
  • setInterval wywołuje funkcję w regularnych odstępach czasu, aż do momentu jej zatrzymania.

Przykład kodu z setTimeout

setTimeout jest używany, gdy chcemy opóźnić wykonanie kodu o określony czas. Na przykład, możemy chcieć wyświetlić alert 2 sekundy po załadowaniu strony.

<!DOCTYPE html>
<html>
<head>
    <title>setTimeout w JavaScript</title>
</head>
<body>

<script>
// Opóźnienie wywołania funkcji o 2 sekundy
setTimeout(function() {
    alert("To jest opóźniony alert!");
}, 2000);
</script>

</body>
</html>

Przykład kodu z setInterval

setInterval jest używany, gdy chcemy, aby funkcja była wykonywana w regularnych odstępach czasu. Na przykład, możemy chcieć aktualizować zegar co sekundę na naszej stronie.

<!DOCTYPE html>
<html>
<head>
    <title>setInterval w JavaScript</title>
</head>
<body>

<div id="clock"></div>

<script>
// Aktualizacja zegara co sekundę
setInterval(function() {
    let date = new Date();
    let time = date.toLocaleTimeString();
    document.getElementById("clock").innerHTML = time;
}, 1000);
</script>

</body>
</html>

Jak zatrzymać setInterval i setTimeout

Aby zatrzymać cykliczne wywołanie funkcji przez setInterval, można użyć funkcji clearInterval. Podobnie, clearTimeout pozwala anulować wykonanie funkcji zaplanowane przez setTimeout.

// Zatrzymywanie setInterval
let intervalId = setInterval(function() {
    console.log("To będzie wyświetlane co sekundę");
}, 1000);

// Zatrzymujemy po 5 sekundach
setTimeout(function() {
    clearInterval(intervalId);
    console.log("setInterval został zatrzymany.");
}, 5000);

Podsumowanie

Choć setInterval i setTimeout mogą wydawać się podobne w swojej funkcji, kluczowa różnica polega na ich zastosowaniu: setTimeout służy do jednorazowego opóźnienia wykonania kodu, a setInterval pozwala na jego cykliczne powtarzanie. Wybór między tymi dwoma funkcjami zależy od konkretnego przypadku użycia w aplikacji. Zrozumienie ich różnic i właściwego stosowania jest niezbędne dla każdego programisty JavaScript, aby skutecznie zarządzać czasem i zdarzeniami w aplikacjach webowych.

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