JavaScript setTimeout expliqué : syntaxe, exemples et bonnes pratiques

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

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

1. Introduction : Qu’est‑ce que JavaScript setTimeout ?

JavaScript est l’un des langages de programmation fondamentaux utilisés pour créer des éléments dynamiques et interactifs dans le développement web. Parmi ses nombreuses fonctionnalités, la fonction setTimeout est fréquemment employée pour exécuter des processus spécifiques après qu’un certain laps de temps se soit écoulé.

Cette fonction agit comme un minuteur : une fois le délai spécifié écoulé, elle exécute une fonction ou un bloc de code dans le programme. Cela facilite la mise en œuvre de scénarios tels que les animations, l’affichage de pop‑ups et le traitement différé.

Cas d’utilisation courants de JavaScript setTimeout

1. Animations différées – Par exemple, ajouter un court délai avant de faire apparaître un élément en fondu.
2. Contrôle des interactions utilisateur – Retarder les clics ou les soumissions de formulaires pour éviter des actions accidentelles.
3. Planification de tâches – Gérer plusieurs tâches asynchrones efficacement en les exécutant séquentiellement après un délai.

Pourquoi setTimeout est‑il nécessaire ?

JavaScript s’exécute essentiellement sur un seul fil d’exécution, ce qui signifie qu’il ne peut pas exécuter plusieurs processus simultanément. En conséquence, un traitement complexe peut figer l’écran.

Cependant, en utilisant setTimeout pour planifier un traitement asynchrone, vous pouvez garder l’interface utilisateur réactive tout en gérant d’autres tâches en arrière‑plan.

Syntaxe de base de setTimeout

setTimeout(function, delay);

• function : Le code ou la fonction à exécuter après le délai.
• delay : Le temps à attendre avant l’exécution (en millisecondes). Une seconde équivaut à 1000 millisecondes.

Exemple :

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

Ce code affiche le message « Displayed after 3 seconds » (Affiché après 3 secondes) dans la console après trois secondes.

Résumé

La fonction setTimeout en JavaScript est une fonctionnalité extrêmement utile pour contrôler le timing au sein d’un programme. Elle est simple à utiliser et prend en charge une grande variété de scénarios tels que les animations et le traitement asynchrone.

Dans la section suivante, nous explorerons des utilisations plus détaillées et des exemples de code pratiques de setTimeout.

2. Syntaxe de base et comportement de setTimeout

La fonction JavaScript setTimeout exécute une fonction après un laps de temps spécifié. Dans cette section, nous expliquerons son utilisation de base et son comportement à l’aide d’exemples concrets.

Syntaxe de base de setTimeout

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

Description des paramètres :

1. function : La fonction ou le bloc de code à exécuter.
2. delay : Le temps de délai en millisecondes.
3. arg1, arg2, … : Arguments optionnels transmis à la fonction.

Utilisation de base

Exemple 1 : Exécution simple avec délai

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

Ce code affiche « Executed after 3 seconds » (Exécuté après 3 secondes) dans la console après trois secondes.

Exemple 2 : Utilisation d’une fonction nommée

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

Dans cet exemple, la fonction greet est appelée après deux secondes et affiche « Hello! ».

Passage d’arguments

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

Sortie :

Good morning!

Annulation d’un minuteur

Pour annuler un minuteur avant son exécution, utilisez la fonction clearTimeout.

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

// Cancel the timer
clearTimeout(timerId);

Résumé

Dans cette section, nous avons couvert la syntaxe de base et des exemples pratiques de setTimeout.

• Nous avons expliqué l’utilisation de base, le passage d’arguments et la façon de récupérer et d’annuler un identifiant de minuteur.
• La section suivante approfondit l’utilisation avancée et les considérations importantes.

3. Utilisation avancée : passage d’arguments et gestion de this

In this section, we explore advanced usage of setTimeout. In particular, we focus on how to pass arguments to functions and important considerations regarding the behavior of this.

Passage d’arguments

Exemple 1 : Passage d’argument simple

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

Sortie :

Hello, Taro!

Passage de plusieurs arguments

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

Sortie :

15

Remarques importantes sur le comportement de this

Exemple : this ne se comporte pas comme prévu

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

Sortie :

Hello, undefined!

Solutions

Utilisation des fonctions fléchées

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

Utilisation de la méthode bind

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

Résumé

Dans cette section, nous avons expliqué comment passer des arguments aux fonctions en utilisant setTimeout et souligné les considérations importantes lors de l’utilisation de this.
Dans la section suivante, nous comparons setTimeout avec setInterval et expliquons quand utiliser chacun.

4. Différences entre setTimeout et setInterval

En JavaScript, il existe une autre fonction liée au timing similaire à setTimeout appelée setInterval. Bien que les deux soient utilisées pour le traitement basé sur le temps, leur comportement diffère considérablement. Cette section explique leurs différences et comment choisir entre elles.

Principales différences entre setTimeout et setInterval

Exemple : comportement de setTimeout

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

Ce code affiche « Executed only once » une seule fois après deux secondes.

Exemple : comportement de setInterval

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

Ce code affiche de façon répétée « Executed every second » à des intervalles d’une seconde.

Annuler setInterval

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

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

Utiliser setTimeout pour une exécution répétée

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

Résumé

Dans cette section, nous avons expliqué les différences entre setTimeout et setInterval et comment les utiliser correctement.
Dans la section suivante, nous présentons des exemples d’utilisation plus pratiques et réels.

5. Cas d’utilisation pratiques de setTimeout

Dans cette section, nous présentons des exemples pratiques et réels d’utilisation de setTimeout. À travers ces exemples, vous apprendrez comment mettre en œuvre le contrôle du timing dans divers scénarios.

Cas d’utilisation 1 : Contrôler une animation de chargement

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

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

Cas d’utilisation 2 : Empêcher les clics rapides sur les boutons (Debounce)

let timeout;

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

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

Cas d’utilisation 3 : Action différée lors de la navigation de page

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

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

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

Cas d’utilisation 4 : Diaporama automatique

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

Cas d’utilisation 5 : Quiz à durée limitée

let timeLeft = 10;

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

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

Résumé

Dans cette section, nous avons présenté plusieurs cas d’utilisation pratiques de setTimeout.
Dans la section suivante, nous expliquerons les considérations importantes ainsi que les astuces de dépannage.

6. Remarques importantes et dépannage

Dans cette section, nous exposons les points clés à garder à l’esprit lors de l’utilisation de setTimeout, ainsi que les problèmes courants et leurs solutions.

1. Le timing d’exécution de setTimeout n’est pas exact

console.log('Start');

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

console.log('End');

Sortie :

Start  
End  
Timer executed (after 2 seconds)

Solution :

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

2. Erreurs de référence this à l’intérieur de setTimeout

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

Solution 1 : Utiliser les fonctions fléchées

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

Solution 2 : Utiliser la méthode bind

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

3. Oublier d’annuler les minuteries

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

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

Résumé

Dans cette section, nous avons abordé les notes importantes et les astuces de dépannage lors de l’utilisation de setTimeout.
Dans la section suivante, nous répondrons aux questions fréquentes (FAQ) des lecteurs.

7. FAQ : Questions fréquentes sur setTimeout

Dans cette section, nous résumons les questions courantes concernant setTimeout sous forme de FAQ.

Q1. setTimeout(0) s’exécute-t-il immédiatement ?

R : Non, setTimeout(0) ne s’exécute pas immédiatement.

console.log('Start');

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

console.log('End');

Sortie :

Start  
End  
Timer executed

Q2. Comment arrêter une minuterie à mi‑parcours ?

R : Vous pouvez arrêter une minuterie en utilisant clearTimeout.

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

clearTimeout(timerId);

Q3. Puis‑je passer des arguments à setTimeout ?

R : Oui, vous pouvez passer des arguments à partir du troisième paramètre.

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

setTimeout(greet, 2000, 'Taro');

Résumé

Dans cette section, nous avons couvert les questions fréquentes et leurs réponses liées à setTimeout.
Dans la section suivante, nous résumons les points clés de cet article et fournissons des conseils pratiques finaux.

8. Résumé final et informations complémentaires

Dans cet article, nous avons étudié en profondeur la fonction JavaScript setTimeout, depuis son utilisation de base jusqu’aux exemples avancés, les considérations importantes et les questions fréquentes.

1. Points clés à retenir

1. Couverture complète des bases aux usages avancés : Nous avons expliqué tout étape par étape, des bases conviviales pour les débutants aux exemples avancés, au dépannage et aux FAQ.
2. Exemples de code pratiques : Nous avons fourni de nombreux exemples concrets que vous pouvez tester et appliquer dans le développement réel.
3. Considérations importantes et solutions : Nous avons abordé les retards d’exécution, les problèmes de référence this et la manière d’annuler correctement les minuteries.

2. Ressources supplémentaires

Documentation officielle :

• MDN Web Docs : setTimeout

Ressources d’apprentissage :

• Explorer la documentation générale sur le traitement asynchrone en JavaScript vous aidera à approfondir votre compréhension.

3. Conclusion

La fonction JavaScript setTimeout est un outil simple mais puissant qui prend en charge un large éventail de cas d’utilisation. En appliquant les bases, les techniques avancées et les meilleures pratiques présentées dans cet article, vous pourrez écrire du code plus flexible et pratique.