Maîtriser `setTimeout` et `setInterval` en JavaScript

Dans le monde animé de JavaScript, la gestion du temps est essentielle. Imaginez que vous développez une application Web dynamique et que vous devez exécuter une fonction après une certaine période ou exécuter une fonction de manière répétée à des intervalles spécifiés. C'est là que setTimeout et setInterval entrent en jeu. Ces deux fonctions permettent aux développeurs de contrôler le timing d'exécution de leur code, rendant les applications Web plus interactives et réactives. Dans ce blog, nous approfondirons setTimeout et setInterval, explorerons leur utilisation à travers des exemples attrayants et discuterons de la façon d'utiliser async/await avec eux.

Les bases de setTimeout

Qu’est-ce que setTimeout ?

setTimeout est une fonction JavaScript qui définit un minuteur qui exécute une fonction ou un morceau de code spécifié une fois le minuteur expiré. C'est un outil fondamental pour gérer les opérations asynchrones.

Syntaxe de setTimeout

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

• function : La fonction à exécuter après l'expiration du minuteur.
• delay : Le temps en millisecondes avant l’exécution de la fonction.
• arg1, arg2, ... : arguments supplémentaires transmis à la fonction.

Exemple : un simple setTimeout

Commençons par un exemple simple. Imaginez que vous cuisinez et que vous avez besoin d'un rappel pour vérifier le four dans 5 secondes.

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

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

Dans cet exemple, la fonction checkOven sera exécutée une fois après 5 secondes.

Les bases de setInterval

Qu’est-ce que setInterval ?

setInterval est une fonction JavaScript qui définit une minuterie qui exécute une fonction ou un morceau de code spécifié à plusieurs reprises, avec un délai fixe entre chaque appel.

Syntaxe de setInterval

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

• function : La fonction à exécuter à plusieurs reprises.
• delay : Le temps en millisecondes entre chaque exécution de fonction.
• arg1, arg2, ... : arguments supplémentaires transmis à la fonction.

Exemple : un simple setInterval

Améliorons notre scénario de cuisine. Supposons que vous deviez remuer la soupe toutes les 2 secondes.

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

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

Dans cet exemple, la fonction StirSoup sera exécutée toutes les 2 secondes.

Effacement des minuteries

clearTimeout

Pour arrêter l'exécution d'un setTimeout, utilisez clearTimeout.

let timerId = setTimeout(checkOven, 5000);

// Cancel the timer
clearTimeout(timerId);

effacerIntervalle

Pour empêcher la répétition d'un setInterval, utilisez clearInterval.

let intervalId = setInterval(stirSoup, 2000);

// Cancel the interval
clearInterval(intervalId);

Utilisation avancée avec exemples

Passer des arguments aux fonctions

setTimeout et setInterval peuvent transmettre des arguments à la fonction en cours d'exécution.

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

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

setTimeout imbriqué pour les tâches récurrentes

Au lieu d'utiliser setInterval, vous pouvez utiliser setTimeout imbriqué pour un contrôle plus précis sur les tâches récurrentes.

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

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

fetchData();

Histoire : Une minuterie de cuisine numérique

Imaginez que vous créez une application de minuterie de cuisine numérique. Les utilisateurs peuvent définir plusieurs minuteries pour différentes tâches de cuisson. En utilisant setTimeout et setInterval, vous pouvez gérer ces minuteries efficacement.

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

Utiliser async et wait avec setTimeout

Bien que setTimeout ne soit pas une fonction basée sur une promesse, vous pouvez l'utiliser avec async et wait en l'enveloppant dans une promesse.

Exemple : encapsulation de setTimeout dans une promesse

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();

Dans cet exemple, la fonction delay renvoie une promesse qui se résout après le délai spécifié. La fonction asyncTask utilise wait pour suspendre l'exécution jusqu'à ce que la promesse soit résolue.

Utiliser async et wait avec setInterval

La gestion de setInterval avec async et wait est plus complexe, car elle nécessite un moyen d'attendre un délai à plusieurs reprises.

Exemple : simulation de setInterval avec async et wait

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

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

asyncIntervalTask();

Dans cet exemple, la fonction asyncIntervalTask ​​simule une tâche récurrente en utilisant une boucle while avec wait sur la fonction delay.

Conclusion

Comprendre et maîtriser setTimeout et setInterval est crucial pour tout développeur JavaScript. Ces fonctions offrent des moyens puissants de gérer le timing et les opérations asynchrones dans vos applications. En tirant parti de leurs capacités, vous pouvez créer des expériences Web plus interactives et dynamiques. De plus, en les intégrant avec async et wait, vous pouvez obtenir encore plus de contrôle et de clarté dans votre code asynchrone.

Que vous construisiez un minuteur de cuisine numérique ou toute autre application nécessitant un timing précis, setTimeout et setInterval sont des outils essentiels dans votre boîte à outils JavaScript. Bon codage !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!