JavaScript setTimeout erklärt: Syntax, Beispiele und bewährte Methoden

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Einführung: Was ist JavaScript setTimeout?

JavaScript ist eine der Kernprogrammiersprachen, die zur Erstellung dynamischer und interaktiver Elemente in der Webentwicklung verwendet werden. Unter seinen vielen Funktionen wird die setTimeout‑Funktion häufig eingesetzt, um bestimmte Prozesse nach einer festgelegten Zeit auszuführen.

Diese Funktion arbeitet wie ein Timer: Sobald die angegebene Verzögerung abgelaufen ist, wird eine Funktion oder ein Code‑Block im Programm ausgeführt. Das erleichtert die Umsetzung von Szenarien wie Animationen, Popup‑Anzeigen und verzögerter Verarbeitung.

Häufige Anwendungsfälle von JavaScript setTimeout

1. Verzögerte Animationen – zum Beispiel ein kurzes Delay, bevor ein Element eingeblendet wird.
2. Steuerung von Benutzerinteraktionen – Verzögern von Klicks oder Formular‑Absendungen, um versehentliche Aktionen zu verhindern.
3. Aufgabenplanung – Mehrere asynchrone Aufgaben effizient verwalten, indem sie nacheinander nach einer Verzögerung ausgeführt werden.

Warum ist setTimeout notwendig?

JavaScript läuft grundsätzlich in einem einzigen Thread, was bedeutet, dass es nicht mehrere Prozesse gleichzeitig ausführen kann. Dadurch kann komplexe Verarbeitung das Bildschirmpanel einfrieren lassen.

Durch die Verwendung von setTimeout zur Planung asynchroner Verarbeitung bleibt die Benutzeroberfläche jedoch reaktionsfähig, während im Hintergrund weitere Aufgaben erledigt werden.

Grundsyntax von setTimeout

setTimeout(function, delay);

• function : Der Code oder die Funktion, die nach der Verzögerung ausgeführt werden soll.
• delay : Die Zeit, um die die Ausführung verzögert wird (in Millisekunden). Eine Sekunde entspricht 1000 Millisekunden.

Beispiel:

setTimeout(() => {
    console.log('Displayed after 3 seconds');
}, 3000);

Dieser Code gibt die Meldung „Nach 3 Sekunden angezeigt“ nach drei Sekunden in der Konsole aus.

Zusammenfassung

Die setTimeout‑Funktion in JavaScript ist ein äußerst nützliches Werkzeug, um das Timing innerhalb eines Programms zu steuern. Sie ist einfach zu benutzen und unterstützt eine Vielzahl von Szenarien, etwa Animationen und asynchrone Verarbeitung.

Im nächsten Abschnitt werden wir detailliertere Anwendungsbeispiele und praktische Code‑Beispiele zu setTimeout vorstellen.

2. Grundsyntax und Verhalten von setTimeout

Die JavaScript‑Funktion setTimeout führt eine Funktion nach einer angegebenen Zeitspanne aus. In diesem Abschnitt erklären wir ihre grundlegende Verwendung und ihr Verhalten anhand konkreter Beispiele.

Grundsyntax von setTimeout

setTimeout(function, delay, [arg1, arg2, ...]);

Parameter‑Beschreibung:

1. function : Die auszuführende Funktion oder der Code‑Block.
2. delay : Die Verzögerungszeit in Millisekunden.
3. arg1, arg2, … : Optionale Argumente, die an die Funktion übergeben werden.

Grundlegende Verwendung

Beispiel 1: Einfache verzögerte Ausführung

setTimeout(() => {
    console.log('Executed after 3 seconds');
}, 3000);

Dieser Code gibt nach drei Sekunden „Nach 3 Sekunden ausgeführt“ in der Konsole aus.

Beispiel 2: Verwendung einer benannten Funktion

function greet() {
    console.log('Hello!');
}
setTimeout(greet, 2000);

In diesem Beispiel wird die Funktion greet nach zwei Sekunden aufgerufen und gibt „Hello!“ aus.

Übergabe von Argumenten

function sayMessage(message) {
    console.log(message);
}
setTimeout(sayMessage, 1500, 'Good morning!');

Ausgabe:

Good morning!

Abbrechen eines Timers

Um einen Timer vor seiner Ausführung abzubrechen, verwendet man die Funktion clearTimeout.

const timerId = setTimeout(() => {
    console.log('This message will not be displayed');
}, 3000);

// Cancel the timer
clearTimeout(timerId);

Zusammenfassung

In diesem Abschnitt haben wir die Grundsyntax und praktische Beispiele von setTimeout behandelt.

• Wir haben die grundlegende Nutzung, das Übergeben von Argumenten und das Abrufen sowie Abbrechen einer Timer‑ID erklärt.
• Der nächste Abschnitt geht tiefer auf erweiterte Anwendungsfälle und wichtige Überlegungen ein.

3. Erweiterte Nutzung: Übergabe von Argumenten und Umgang mit this

In diesem Abschnitt untersuchen wir die erweiterte Verwendung von setTimeout. Insbesondere konzentrieren wir uns darauf, wie man Argumente an Funktionen übergibt und wichtige Überlegungen zum Verhalten von this.

Argumente übergeben

Beispiel 1: Einfaches Übergeben von Argumenten

function greet(name) {
    console.log(`Hello, ${name}!`);
}
setTimeout(greet, 2000, 'Taro');

Ausgabe:

Hello, Taro!

Mehrere Argumente übergeben

function add(a, b) {
    console.log(a + b);
}
setTimeout(add, 1000, 5, 10);

Ausgabe:

15

Wichtige Hinweise zum Verhalten von this

Beispiel: this verhält sich nicht wie erwartet

const obj = {
    name: 'Taro',
    greet: function() {
        setTimeout(function() {
            console.log(`Hello, ${this.name}!`);
        }, 1000);
    }
};
obj.greet();

Ausgabe:

Hello, undefined!

Lösungen

Verwendung von Pfeilfunktionen

greet: function() {
    setTimeout(() => {
        console.log(`Hello, ${this.name}!`);
    }, 1000);
}

Verwendung der bind-Methode

greet: function() {
    setTimeout(function() {
        console.log(`Hello, ${this.name}!`);
    }.bind(this), 1000);
}

Zusammenfassung

In diesem Abschnitt haben wir erklärt, wie man Argumente an Funktionen mit setTimeout übergibt und wichtige Überlegungen beim Arbeiten mit this hervorgehoben.
Im nächsten Abschnitt vergleichen wir setTimeout mit setInterval und erklären, wann man welches verwenden sollte.

4. Unterschiede zwischen setTimeout und setInterval

In JavaScript gibt es eine weitere zeitbezogene Funktion, die setTimeout ähnlich ist, genannt setInterval. Während beide für zeitbasierte Verarbeitung verwendet werden, unterscheidet sich ihr Verhalten erheblich. Dieser Abschnitt erklärt ihre Unterschiede und wie man zwischen ihnen wählt.

Hauptunterschiede zwischen setTimeout und setInterval

Beispiel: Verhalten von setTimeout

setTimeout(() => {
    console.log('Executed only once');
}, 2000);

Dieser Code gibt “Executed only once” einmalig nach zwei Sekunden aus.

Beispiel: Verhalten von setInterval

setInterval(() => {
    console.log('Executed every second');
}, 1000);

Dieser Code gibt “Executed every second” wiederholt in Ein‑Sekunden‑Intervallen aus.

Abbrechen von setInterval

const intervalId = setInterval(() => {
    console.log('Running repeatedly...');
}, 1000);

// Stop the interval after 5 seconds
setTimeout(() => {
    clearInterval(intervalId);
    console.log('Interval stopped');
}, 5000);

Verwendung von setTimeout für wiederholte Ausführung

function repeat() {
    console.log('Executed repeatedly');
    setTimeout(repeat, 1000); // Call itself again after 1 second
}
repeat();

Zusammenfassung

In diesem Abschnitt haben wir die Unterschiede zwischen setTimeout und setInterval erklärt und wie man sie korrekt verwendet.
Im nächsten Abschnitt stellen wir weitere praktische und realitätsnahe Anwendungsbeispiele vor.

5. Praktische Anwendungsfälle von setTimeout

In diesem Abschnitt stellen wir praktische und realitätsnahe Beispiele mit setTimeout vor. Durch diese Beispiele können Sie lernen, wie man die Zeitsteuerung in verschiedenen Szenarien implementiert.

Anwendungsfall 1: Steuerung einer Ladeanimation

const loader = document.getElementById('loader');
loader.style.display = 'block';

setTimeout(() => {
    loader.style.display = 'none';
    console.log('Loading completed');
}, 3000);

Anwendungsfall 2: Verhindern schneller Button‑Klicks (Debounce)

let timeout;

document.getElementById('submitButton').addEventListener('click', () => {
    clearTimeout(timeout);

    timeout = setTimeout(() => {
        console.log('Click confirmed');
    }, 500);
});

Anwendungsfall 3: Verzögerte Aktion während der Seitennavigation

const link = document.getElementById('pageLink');

link.addEventListener('click', (e) => {
    e.preventDefault();
    document.body.style.opacity = '0';

    setTimeout(() => {
        window.location.href = e.target.href;
    }, 500);
});

Use Case 4: Automatic Slideshow

const images = ['img1.jpg', 'img2.jpg', 'img3.jpg'];
let currentIndex = 0;

function showNextImage() {
    const imgElement = document.getElementById('slideshow');
    imgElement.src = images[currentIndex];

    currentIndex = (currentIndex + 1) % images.length;

    setTimeout(showNextImage, 3000);
}
showNextImage();

Use Case 5: Time-Limited Quiz

let timeLeft = 10;

const timer = setInterval(() => {
    console.log(`Time remaining: ${timeLeft} seconds`);
    timeLeft--;

    if (timeLeft < 0) {
        clearInterval(timer);
        console.log('Time is up!');
    }
}, 1000);

Summary

In diesem Abschnitt haben wir mehrere praktische Anwendungsfälle von setTimeout vorgestellt.
Im nächsten Abschnitt werden wir wichtige Überlegungen und Tipps zur Fehlersuche erläutern.

6. Wichtige Hinweise und Fehlersuche

In diesem Abschnitt erklären wir wichtige Punkte, die bei der Verwendung von setTimeout zu beachten sind, sowie häufige Probleme und deren Lösung.

1. Die Ausführungszeit von setTimeout ist nicht exakt

console.log('Start');

setTimeout(() => {
    console.log('Timer executed');
}, 2000);

console.log('End');

Ausgabe:

Start  
End  
Timer executed (after 2 seconds)

Lösung:

const start = Date.now();
setTimeout(() => {
    const elapsed = Date.now() - start;
    console.log(`Execution time: ${elapsed} milliseconds`);
}, 2000);

2. this-Referenzfehler innerhalb von setTimeout

const obj = {
    name: 'Taro',
    greet: function() {
        setTimeout(function() {
            console.log(`Hello, ${this.name}!`);
        }, 1000);
    }
};
obj.greet();

Lösung 1: Verwendung von Arrow Functions

setTimeout(() => {
    console.log(`Hello, ${this.name}!`);
}, 1000);

Lösung 2: Verwendung der bind-Methode

setTimeout(function() {
    console.log(`Hello, ${this.name}!`);
}.bind(this), 1000);

3. Vergessen, Timer abzubrechen

const timerId = setTimeout(() => {
    console.log('This will execute');
}, 5000);

// Cancel the timer based on a condition
clearTimeout(timerId);

Summary

In diesem Abschnitt haben wir wichtige Hinweise und Tipps zur Fehlersuche bei der Verwendung von setTimeout behandelt.
Im nächsten Abschnitt beantworten wir häufig gestellte Fragen (FAQ) der Leser.

7. FAQ: Häufig gestellte Fragen zu setTimeout

In diesem Abschnitt fassen wir häufige Fragen zu setTimeout im FAQ-Format zusammen.

F1. Führt setTimeout(0) sofort aus?

A: Nein, setTimeout(0) führt nicht sofort aus.

console.log('Start');

setTimeout(() => {
    console.log('Timer executed');
}, 0);

console.log('End');

Ausgabe:

Start  
End  
Timer executed

F2. Wie kann ich einen Timer zwischendurch stoppen?

A: Sie können einen Timer mit clearTimeout stoppen.

const timerId = setTimeout(() => {
    console.log('This will not be executed');
}, 5000);

clearTimeout(timerId);

F3. Kann ich Argumente an setTimeout übergeben?

A: Ja, Sie können ab dem dritten Parameter Argumente übergeben.

function greet(name) {
    console.log(`Hello, ${name}!`);
}

setTimeout(greet, 2000, 'Taro');

Summary

In diesem Abschnitt haben wir häufig gestellte Fragen und Antworten zu setTimeout behandelt.
Im nächsten Abschnitt fassen wir die wichtigsten Punkte dieses Artikels zusammen und geben abschließende praktische Ratschläge.

8. Abschließende Zusammenfassung und weitere Informationen

In diesem Artikel haben wir die JavaScript‑Funktion setTimeout ausführlich behandelt, von der Grundnutzung über fortgeschrittene Beispiele bis hin zu wichtigen Überlegungen und häufig gestellten Fragen.

1. Wichtigste Erkenntnisse

1. Umfassende Abdeckung von Grundlagen bis zu fortgeschrittener Nutzung: Wir haben alles Schritt für Schritt erklärt, von anfängerfreundlichen Grundlagen bis zu fortgeschrittenen Beispielen, Fehlerbehebung und FAQs.
2. Praktische Code-Beispiele: Wir haben viele konkrete Beispiele bereitgestellt, die Sie in der realen Entwicklung testen und anwenden können.
3. Wichtige Überlegungen und Lösungen: Wir haben Ausführungszeitverzögerungen, this-Referenzprobleme und wie man Timer ordnungsgemäß abbricht, behandelt.

2. Zusätzliche Ressourcen

Offizielle Dokumentation:

• MDN Web Docs: setTimeout

Lernressourcen:

• Die Erkundung allgemeiner Dokumentation zu asynchroner Verarbeitung in JavaScript wird Ihr Verständnis vertiefen.

3. Abschließende Gedanken

Die JavaScript-Funktion setTimeout ist ein einfaches, aber mächtiges Werkzeug, das eine breite Palette von Anwendungsfällen unterstützt. Indem Sie die Grundlagen, fortgeschrittenen Techniken und Best Practices anwenden, die in diesem Artikel vorgestellt wurden, können Sie flexibleren und praktischeren Code schreiben.