setInterval() – Timer, Countdown, Slideshows

setInterval vs setTimeout

Während setTimeout (action,timeout) Anweisungen nach einer Verzögerung von timeout Millisekunden einmal ausführt, wiederholt Javascript Anweisungen mit setInterval ( action, i) in einem Intervall von i Millisekunden.

Für eine fließende Animation wie der Farbroller muss setTimeout rekursiv ausgeführt werden, aber dann gibt es immer noch einen kleinen Unterschied:

• setInterval führt die Anweisungen sofort und dann alle 1000 / 2000 … Millisekunden durch
• setTimeout wartet 1000 / 2000 … Millisekunden, führt die Funktion aus (und braucht dafür ein paar Millisekunden) und wartet dann auf den nächsten Timeout. Die Zeitspanne zwischen zwei Frames ist also einen Tick größer als 1000 / 2000 … Millisekunden.

     +-- Referenz für den Aufruf von cancelInterval
     |
     |             Verzögerung / Delay --+
     |                                   |
var ref = window.setInterval( animate, 1000);
                                  |
                                  +-- callback
function animate() {
  // Anweisungen der Animation
}

clearInterval

clearInterval(action,interval) regelt oder cancelt eine Funktion, die wiederholt mit einer Verzögerung aufgeweckt wird.

setInterval mit closures

Alternativ kann setInterval( action , delay) mit einer anonymen Funktion aufgerufen werden. Das hält den Scriptcode besser zusammen als var interval = window.setInterval (code, delay) und ersetzt auch eine externe Funktion.

const timerId = setInterval ( function tick() {
   let counter = parseInt(document.getElementById("counter").textContent);
   if (counter < 1) {
      clearInterval(timerId)
   } else 
      document.getElementById("counter").textContent = counter - 1;
}, 1000);

Beispiel: Slideshow mit setInterval() und Keyframes-Animation

Die einfache Slideshow braucht nur einen Container für die einzelnen Slides oder Bilder. Die erste Slide / das erste Bild bekommt die CSS-Klasse active.

<div class="slideshow">
	<div class="slide active"><img src="…"></div>
	<div class="slide"><img src="…"></div>
	…
</div>

Der div-Block slideshow ist relativ positioniert, die Slides darunter sind absolut positioniert. display:flex bringt alle Slides nebeneinander auf eine Linie, so dass sie in jedem Interval nach links aus dem sichtbaren Ausschnitt geschoben werden können.

.slideshow {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slide {
  position: absolute;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
}

.slide img {
   width: 100%;
   object-fit: contain;
}

.slide.active {
  opacity: 1;
  pointer-events: auto;
}

Das Javascript Web Animation API animiert die einzelnen Slides ganz ohne externe Library. Am Ende wechselt setInterval() alle drei Sekunden das aktive Bild gegen das nächste Bild aus.

const slides = document.querySelectorAll(".slide");
let current = 0;

function showSlide(nextIndex) {
  const currentSlide = slides[current];
  const nextSlide = slides[nextIndex];

  // Aktuelles Bild nach links rausschieben
  currentSlide.animate([
    { transform: "translateX(0%)", opacity: 1 },
    { transform: "translateX(-100%)", opacity: 0 }
  ], {
    duration: 600,
    easing: "ease"
  });

  // Nächstes Bild animieren
  nextSlide.animate([
    { transform: "translateX(100%)", opacity: 0 },
    { transform: "translateX(0%)", opacity: 1 }
  ], {
    duration: 600,
    easing: "ease"
  });

  // CSS-Klassen auf Stand bringen
  currentSlide.classList.remove("active");
  nextSlide.classList.add("active");
  current = nextIndex;
}

function nextSlide() {
  const next = (current + 1) % slides.length;
  showSlide(next);
}

setInterval(nextSlide, 3000);

setInterval() – Beispiele und Anwendungen

Anwendung	Beschreibung
Slideshows / Karussells	Automatischer Bildwechsel (siehe Beispiel oben).
Live-Daten abfragen	In bestimmten Intervallen den Status eines Servers oder eines Sensors abfragen.
Countdown-Timer	Jede Sekunde den Timer aktualisieren.
Polling oder automatische Updates	Regelmäßig prüfen, ob eine Bedingung erfüllt ist oder ein Element ins Document Object Model geladen wurde. Allerdings sollte beim asynchronen Laden sichergestellt werden, dass sich Intervalle nicht überlappen. Dann sind Promises oder async/await in Kombination mit setTimeout() oft robuster.
Hintergrundaktionen	Autosave alle paar Minuten auslösen.