Timer

Verfügbar

4.1 Funktion setTimeout

Timer in JavaScript ermöglichen es, bestimmte Aktionen in festgelegten Zeitabständen auszuführen. Die beiden Hauptmethoden zur Arbeit mit Timern sind setTimeout() und setInterval(). Sie werden verwendet, um Code mit Verzögerung oder in regelmäßigen Abständen auszuführen.

Die Methode setTimeout() erlaubt es, eine Funktion einmal nach einer bestimmten Anzahl an Millisekunden auszuführen. Das ist praktisch für die verzögerte Ausführung von Code.

Syntax:

const timeoutID = setTimeout(callback, delay, ...args);

Wo:

  • callback: die Funktion, die ausgeführt wird
  • delay: die Verzögerung in Millisekunden vor der Ausführung der Funktion
  • args: zusätzliche Argumente, die an die Funktion callback übergeben werden

Beispiel für die Verwendung von setTimeout():

JavaScript
// Funktion, die nach 2 Sekunden ausgeführt wird
function greet() {
  console.log('Hello, world!');
}

// Timer setzen
const timeoutID = setTimeout(greet, 2000);

4.2 Abbrechen des Timers setTimeout

Wenn du die Ausführung einer mit setTimeout() geplanten Funktion abbrechen möchtest, kannst du die Methode clearTimeout() verwenden:

JavaScript
// Funktion, die nach 2 Sekunden ausgeführt wird
function greet() {
  console.log('Hello, world!');
}

// Timer setzen
const timeoutID = setTimeout(greet, 2000);

// Timer abbrechen
clearTimeout(timeoutID);

Beispiel mit zusätzlichen Argumenten:

JavaScript
// Funktion, die nach 2 Sekunden mit Argumenten ausgeführt wird
function greet(name) {
  console.log(`Hello, ${name}!`);
}

// Timer setzen mit Übergabe eines Arguments
const timeoutID = setTimeout(greet, 2000, 'Alice');

4.3 Funktion setInterval

Die Methode setInterval() erlaubt es, eine Funktion wiederholt in festgelegten Zeitintervallen auszuführen. Das ist nützlich für die periodische Ausführung von Code.

Syntax:

const intervalID = setInterval(callback, delay, ...args);

Wo:

  • callback: die Funktion, die ausgeführt wird
  • delay: das Intervall in Millisekunden zwischen den Aufrufen der Funktion
  • args: zusätzliche Argumente, die an die Funktion callback übergeben werden

Beispiel für die Verwendung von setInterval:

JavaScript
// Funktion, die alle 2 Sekunden ausgeführt wird
function greet() {
  console.log('Hello, world!');
}

// Intervall setzen
const intervalID = setInterval(greet, 2000);

4.4 Abbrechen des Intervalls setInterval

Wenn du die wiederholte Ausführung einer Funktion beenden möchtest, kannst du die Methode clearInterval() verwenden.

JavaScript
// Funktion, die alle 2 Sekunden ausgeführt wird
function greet() {
  console.log('Hello, world!');
}

// Intervall setzen
const intervalID = setInterval(greet, 2000);

// Intervall nach 10 Sekunden abbrechen
setTimeout(() => {
  clearInterval(intervalID);
  console.log('Interval cleared');
}, 10000);

Beispiel mit zusätzlichen Argumenten:

JavaScript
// Funktion, die alle 2 Sekunden mit Argumenten ausgeführt wird
function greet(name) {
  console.log(`Hello, ${name}!`);
}

// Intervall setzen mit Übergabe eines Arguments
const intervalID = setInterval(greet, 2000, 'Alice');

4.5 Beispiele für praktische Anwendungen

Beispiel 1: Automatische Aktualisierung der Zeit

HTML
<!DOCTYPE html>
<html>
  <head>
    <title>Auto-update Time</title>
  </head>
  <body>
    <h1>Current Time</h1>
    <div id="time"></div>

    <script>
      function updateTime() {
        const now = new Date();
        const timeString = now.toLocaleTimeString();
        document.getElementById('time').textContent = timeString;
      }

      // Aktualisierung der Zeit jede Sekunde
      updateTime();
      setInterval(updateTime, 1000);
    </script>
  </body>
</html>

Beispiel 2: Periodische Datenanfragen

JavaScript
// Funktion zur Emulation einer Datenanfrage
function fetchData() {
  console.log('Fetching data...');
  // Hier kann eine echte Anfrage an den Server gestellt werden
}

// Ausführung der Datenanfrage alle 10 Sekunden
const intervalID = setInterval(fetchData, 10000);

// Anfragen nach 1 Minute stoppen
setTimeout(() => {
  clearInterval(intervalID);
  console.log('Stopped fetching data');
}, 60000);
1
Aufgabe
Frontend SELF DE,  Level 37Lektion 3
Gesperrt
Verzögerte Nachricht
Verzögerte Nachricht
1
Aufgabe
Frontend SELF DE,  Level 37Lektion 3
Gesperrt
Aktualisierung der Zeit
Aktualisierung der Zeit
Kommentare
  • Beliebt
  • Neu
  • Alt
Du musst angemeldet sein, um einen Kommentar schreiben zu können
Auf dieser Seite gibt es noch keine Kommentare