Beherrschen von „setTimeout“ und „setInterval“ in JavaScript

In der geschäftigen Welt von JavaScript ist Zeitmanagement der Schlüssel. Stellen Sie sich vor, Sie entwickeln eine dynamische Webanwendung und müssen eine Funktion nach einem bestimmten Zeitraum oder wiederholt in bestimmten Intervallen ausführen. Hier kommen setTimeout und setInterval ins Spiel. Mit diesen beiden Funktionen können Entwickler den Zeitpunkt ihrer Codeausführung steuern und so Webanwendungen interaktiver und reaktionsfähiger machen. In diesem Blog werden wir uns eingehend mit setTimeout und setInterval befassen, ihre Verwendung anhand ansprechender Beispiele untersuchen und diskutieren, wie man async/await mit ihnen verwendet.

Die Grundlagen von setTimeout

Was ist setTimeout?

setTimeout ist eine JavaScript-Funktion, die einen Timer setzt, der eine Funktion oder einen bestimmten Codeabschnitt ausführt, sobald der Timer abgelaufen ist. Es ist ein grundlegendes Werkzeug zur Verwaltung asynchroner Vorgänge.

Syntax von setTimeout

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

• Funktion: Die Funktion, die nach Ablauf des Timers ausgeführt werden soll.
• Verzögerung: Die Zeit in Millisekunden, bevor die Funktion ausgeführt wird.
• arg1, arg2, ...: Zusätzliche Argumente, die an die Funktion übergeben werden.

Beispiel: Ein einfaches setTimeout

Beginnen wir mit einem einfachen Beispiel. Stellen Sie sich vor, Sie kochen und benötigen innerhalb von 5 Sekunden eine Erinnerung, den Ofen zu überprüfen.

function checkOven() {
    console.log("Time to check the oven!");
}

setTimeout(checkOven, 5000); // 5000 milliseconds = 5 seconds

In diesem Beispiel wird die checkOven-Funktion einmal nach 5 Sekunden ausgeführt.

Die Grundlagen von setInterval

Was ist setInterval?

setInterval ist eine JavaScript-Funktion, die einen Timer einstellt, der eine Funktion oder einen bestimmten Codeabschnitt wiederholt ausführt, mit einer festen Zeitverzögerung zwischen den einzelnen Aufrufen.

Syntax von setInterval

setInterval(function, delay, arg1, arg2, ...);

• Funktion: Die Funktion, die wiederholt ausgeführt werden soll.
• Verzögerung: Die Zeit in Millisekunden zwischen jeder Funktionsausführung.
• arg1, arg2, ...: Zusätzliche Argumente, die an die Funktion übergeben werden.

Beispiel: Ein einfaches setInterval

Lassen Sie uns unser Kochszenario verbessern. Angenommen, Sie müssen die Suppe alle 2 Sekunden umrühren.

function stirSoup() {
    console.log("Stirring the soup...");
}

setInterval(stirSoup, 2000); // 2000 milliseconds = 2 seconds

In diesem Beispiel wird die stirSoup-Funktion alle 2 Sekunden ausgeführt.

Timer löschen

clearTimeout

Um die Ausführung eines setTimeout zu stoppen, verwenden Sie „clearTimeout“.

let timerId = setTimeout(checkOven, 5000);

// Cancel the timer
clearTimeout(timerId);

klaresIntervall

Um zu verhindern, dass sich ein setInterval wiederholt, verwenden Sie „clearInterval“.

let intervalId = setInterval(stirSoup, 2000);

// Cancel the interval
clearInterval(intervalId);

Erweiterte Verwendung mit Beispielen

Übergabe von Argumenten an Funktionen

Sowohl setTimeout als auch setInterval können Argumente an die ausgeführte Funktion übergeben.

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

setTimeout(greet, 3000, "Alice"); // Outputs "Hello, Alice!" after 3 seconds

Verschachteltes setTimeout für wiederkehrende Aufgaben

Anstelle von setInterval können Sie verschachteltes setTimeout verwenden, um wiederkehrende Aufgaben präziser zu steuern.

function fetchData() {
    console.log("Fetching data...");

    setTimeout(fetchData, 2000); // Recursively call fetchData every 2 seconds
}

fetchData();

Geschichte: Ein digitaler Küchentimer

Stellen Sie sich vor, Sie erstellen eine digitale Küchentimer-App. Benutzer können mehrere Timer für verschiedene Kochaufgaben einstellen. Mit setTimeout und setInterval können Sie diese Timer effizient verwalten.

class KitchenTimer {
    constructor() {
        this.timers = [];
    }

    addTimer(name, duration) {
        let timerId = setTimeout(() => {
            console.log(`${name} timer done!`);
            this.removeTimer(timerId);
        }, duration);

        this.timers.push({ name, timerId });
        console.log(`${name} timer set for ${duration / 1000} seconds.`);
    }

    removeTimer(timerId) {
        this.timers = this.timers.filter(timer => timer.timerId !== timerId);
    }

    clearAllTimers() {
        this.timers.forEach(timer => clearTimeout(timer.timerId));
        this.timers = [];
        console.log("All timers cleared.");
    }
}

let myKitchen = new KitchenTimer();
myKitchen.addTimer("Pasta", 5000);
myKitchen.addTimer("Cake", 10000);

setTimeout(() => {
    myKitchen.clearAllTimers();
}, 8000); // Clear all timers after 8 seconds

Verwenden von Async und Warten mit setTimeout

Obwohl setTimeout keine auf Versprechen basierende Funktion ist, können Sie sie mit Async und Wait verwenden, indem Sie sie in ein Versprechen einschließen.

Beispiel: SetTimeout in ein Versprechen einschließen

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function asyncTask() {
    console.log("Task started...");
    await delay(2000);
    console.log("Task completed after 2 seconds.");
}

asyncTask();

In diesem Beispiel gibt die Verzögerungsfunktion ein Versprechen zurück, das nach der angegebenen Verzögerung aufgelöst wird. Die asyncTask-Funktion verwendet „await“, um die Ausführung anzuhalten, bis das Versprechen aufgelöst wird.

Verwenden Sie async und warten Sie mit setInterval

Der Umgang mit „setInterval“ mit „async“ und „await“ ist komplexer, da eine Möglichkeit erforderlich ist, wiederholt auf eine Verzögerung zu warten.

Beispiel: SetInterval mit Async und Wait simulieren

function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function asyncIntervalTask() {
    while (true) {
        console.log("Interval task executing...");
        await delay(2000);
    }
}

asyncIntervalTask();

In diesem Beispiel simuliert die Funktion asyncIntervalTask ​​eine wiederkehrende Aufgabe, indem sie eine While-Schleife mit Warten auf die Verzögerungsfunktion verwendet.

Abschluss

SetTimeout und setInterval zu verstehen und zu beherrschen ist für jeden JavaScript-Entwickler von entscheidender Bedeutung. Diese Funktionen bieten leistungsstarke Möglichkeiten zur Verwaltung von Timing und asynchronen Vorgängen in Ihren Anwendungen. Durch die Nutzung ihrer Fähigkeiten können Sie interaktivere und dynamischere Weberlebnisse schaffen. Darüber hinaus können Sie durch die Integration mit Async und Wait noch mehr Kontrolle und Klarheit in Ihrem asynchronen Code erreichen.

Egal, ob Sie einen digitalen Küchentimer oder eine andere Anwendung erstellen, die präzises Timing erfordert, setTimeout und setInterval sind wesentliche Werkzeuge in Ihrem JavaScript-Toolkit. Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonBeherrschen von „setTimeout“ und „setInterval“ in JavaScript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!