Comment utiliser setTimeout() en JavaScript expliqué en 5 minutes ou moins

En tant que développeur web, l’agilité et la capacité d’interaction de votre application web sont des facteurs déterminants pour une expérience utilisateur réussie. Pour optimiser cette expérience, il est indispensable d’intégrer des comportements dynamiques et de maîtriser le moment précis où certaines portions de code sont exécutées.

La fonction setTimeout() se révèle un atout précieux dans ce contexte. Elle offre la possibilité de planifier l’exécution de code, de gérer des animations, de mettre en place des compteurs et de piloter les opérations asynchrones au sein de votre application.

Il est donc crucial de maîtriser la syntaxe de setTimeout(), ses modalités d’emploi et son application potentielle dans vos projets. Cet article se propose d’explorer ces aspects et de vous doter des connaissances nécessaires pour exploiter pleinement le potentiel de cette fonction.

La fonction JavaScript setTimeout()

setTimeout() est une fonction globale liée à l’objet window. Elle permet d’exécuter une fonction ou un bloc de code spécifié, une fois un laps de temps écoulé. Par exemple, pour déclencher une action après un délai de quatre secondes, setTimeout() est l’outil à utiliser.

Lors de son invocation, setTimeout() met en place un temporisateur qui décompte le temps spécifié. Une fois ce délai expiré, la fonction ou le code que vous lui avez transmis est exécuté.

En tant que fonction globale, setTimeout() est accessible partout dans votre code, sans qu’il soit nécessaire de l’importer. L’objet global, fourni par le modèle d’objet de document (DOM) dans le navigateur, est désigné par la propriété window.

Par conséquent, l’utilisation de window.setTimeout() ou simplement setTimeout() est équivalente, car l’objet global window est implicite. Il n’y a aucune distinction entre window.setTimeout() et setTimeout().

Voici la syntaxe générale de setTimeout() :

setTimeout(fonction, délai)

• fonction : la fonction à exécuter après le délai spécifié.
• délai : le temps, en millisecondes, après lequel la fonction sera exécutée. Une seconde équivaut à 1000 millisecondes.

Lors de l’utilisation de setTimeout(), la valeur du délai doit être numérique pour éviter tout comportement inattendu. L’argument délai est facultatif. S’il n’est pas précisé, sa valeur par défaut est 0 et la fonction est exécutée immédiatement.

setTimeout() renvoie un identifiant unique, nommé timeoutID, qui est un entier positif servant à identifier de manière unique le temporisateur créé lors de l’appel à la fonction.

Il est essentiel de noter que setTimeout() est une fonction asynchrone. Son temporisateur n’interrompt pas l’exécution des autres fonctions dans la pile d’appels.

Comment utiliser setTimeout()

Explorons des exemples illustrant l’emploi de la fonction setTimeout() :

// setTimeout() avec une déclaration de fonction
setTimeout(function () {
  console.log("Bonjour le monde après 3 secondes");
}, 3000)

// setTimeout() avec une fonction fléchée
setTimeout(() => {
  console.log("Bonjour le monde dans une fonction fléchée - 1 seconde")
}, 1000)

Résultat :

Bonjour le monde dans une fonction fléchée - 1 seconde
Bonjour le monde après 3 secondes

Dans l’exemple ci-dessus, le second setTimeout() affiche son résultat en premier car il est associé à un délai plus court, de 1 seconde, par rapport au premier dont le délai est de 3 secondes. Comme mentionné précédemment, setTimeout() est asynchrone. Lors de l’appel du premier setTimeout() avec un délai de 3 secondes, un temporisateur de 3 secondes est lancé, mais l’exécution du reste du code du programme n’est pas interrompue.

Pendant que la fonction décompte à partir de 3, le reste du code de la pile d’appels est exécuté. Dans cet exemple, la portion de code suivante est le second setTimeout() avec un délai de 1 seconde. C’est pourquoi son code est exécuté avant celui du premier setTimeout().

Lors de l’utilisation de setTimeout(), il n’est pas nécessaire de définir la fonction directement au sein de la fonction.

// déclaration de fonction
function saluer() {
  console.log("Salut tout le monde !")
}

// stockage d'une fonction dans une variable - expression de fonction
const exprimer = function () {
  console.log("Comment allez-vous ?")
}

// utilisation d'une fonction fléchée
const auRevoir = () => {
  console.log("Cordialement : toptips.fr :)")
}

// passage d'une référence de fonction à setTimeout()
setTimeout(saluer, 1000)
setTimeout(exprimer, 2000)
setTimeout(auRevoir, 3000)

Résultat :

Salut tout le monde !
Comment allez-vous ?
Cordialement : toptips.fr :)

Lorsque nous définissons une fonction à l’extérieur puis la passons à setTimeout(), ce que nous transmettons est une référence vers la fonction que nous souhaitons exécuter après un certain temps.

setTimeout() avec des paramètres additionnels

setTimeout() propose une syntaxe alternative qui permet de transmettre des paramètres additionnels à la fonction. Ces paramètres seront utilisés au sein de la fonction exécutée après le délai.

La syntaxe est la suivante :

setTimeout(fonctionRef, délai, param1, param2, /* …, */ paramN)

Vous pouvez transmettre un nombre quelconque de paramètres additionnels, en fonction du nombre d’arguments requis par la fonction référencée.

Considérez la fonction ci-dessous :

function saluer (nom, message) {
  console.log(`Bonjour ${nom}, ${message}`)
}

Pour exécuter cette fonction après un certain temps en utilisant setTimeout(), procédez comme suit :

// setTimeOut() avec des paramètres supplémentaires
function saluer (nom, message) {
  console.log(`Bonjour ${nom}, ${message}`)
}

setTimeout(saluer, 2000, "Jean", "bon codage !");

Résultat :

Bonjour Jean, bon codage !

Rappelez-vous que lorsque nous définissons une fonction ailleurs puis la transmettons à setTimeout(), nous passons une simple référence à la fonction. Dans l’exemple ci-dessus, nous passons la référence saluer et non pas saluer(), qui appelle la fonction. Nous voulons que ce soit setTimeout() qui appelle la fonction en utilisant sa référence.

C’est pourquoi il est impossible de transmettre directement les paramètres supplémentaires, comme illustré ci-dessous :

// Cela provoque une erreur ERR_INVALID_ARG_TYPE
setTimeout(saluer("Jean", "bon codage !"), 2000);

Dans le code ci-dessus, la fonction saluer est exécutée immédiatement, sans attendre que 2 secondes ne se soient écoulées. Une erreur est alors renvoyée. Le résultat de l’exécution du code est illustré ci-dessous :

Annulation de setTimeout()

Il est possible d’empêcher l’exécution d’une fonction planifiée avec setTimeout() en utilisant la fonction clearTimeout(). Cela peut être utile si une fonction a été programmée pour s’exécuter après un certain temps, mais que l’on ne souhaite plus cette exécution après que certaines conditions aient été remplies ou aient changé.

La syntaxe de clearTimeout() est la suivante :

clearTimeout(timeoutID)

clearTimeout() accepte un seul argument, timeoutID, qui est l’identifiant unique renvoyé par setTimeout().

Considérez l’exemple suivant :

function texte() {
  console.log("Ce texte ne sera pas affiché")
}

function saluer() {
  console.log("Bonjour après 5 secondes")
}

// Programmation de l'exécution de la fonction texte() après 3 secondes
const timeOutID = setTimeout(texte, 3000);

// Annulation du délai de la fonction texte() en utilisant clearTimeout()
clearTimeout(timeOutID)
console.log(`${timeOutID} a été annulé`)

// Programmation de l'exécution de la fonction saluer() après 5 secondes
setTimeout(saluer, 5000)

Résultat :

2 a été annulé
Bonjour après 5 secondes

La fonction texte() n’est pas exécutée car clearTimeout() est utilisé pour annuler son délai, empêchant ainsi son exécution.

Avantages de l’utilisation de setTimeout()

Voici quelques avantages de l’utilisation de la fonction setTimeout() :

• Retarder l’exécution du code : La fonction principale de setTimeout() est de permettre aux développeurs de retarder l’exécution de portions de code. Cette fonctionnalité est cruciale pour la création d’animations, la gestion d’événements chronométrés et le contrôle du flux de code asynchrone. setTimeout() libère également le thread principal pour l’exécution d’autres codes.
• Implémentation de minuteurs : setTimeout() offre un moyen simple de mettre en place des minuteurs basiques dans une application, sans avoir recours à des bibliothèques externes ou à des manipulations complexes de dates.
• Limitation et anti-rebond : setTimeout() peut être utilisé pour limiter le nombre d’appels de certaines fonctions ou actions, notamment lors d’événements comme le défilement ou la saisie. L’anti-rebond permet à votre application d’attendre un certain temps avant d’appeler une fonction. La limitation, quant à elle, restreint le nombre d’appels de fonction effectués durant une période donnée. setTimeout() permet de réaliser les deux.
• Amélioration de l’expérience utilisateur : setTimeout() vous permet d’améliorer l’expérience utilisateur de votre application en contrôlant le moment précis où certaines actions sont exécutées, comme l’affichage de notifications, d’alertes, de messages contextuels et d’animations. Ceci est pratique pour éviter de surcharger l’utilisateur d’informations, et donc améliorer son expérience.
• Amélioration des performances web : setTimeout() peut être utilisé pour optimiser les performances et la réactivité globale des applications web, en décomposant des problèmes complexes en problèmes plus simples. Ces petits problèmes peuvent être traités au sein de setTimeout(), permettant aux autres parties du code de poursuivre leur exécution, sans affecter les performances ou la réactivité de l’application.

Il est évident que setTimeout() est à la fois puissant et très utile lors de la création d’applications avec JavaScript.

Inconvénients de l’utilisation de setTimeout()

Voici quelques inconvénients liés à l’emploi de setTimeout() :

• Synchronisation inexacte : setTimeout() ne peut pas garantir le moment exact où une fonction sera appelée ou une opération effectuée. Parfois, des codes mal écrits peuvent engendrer des conditions de concurrence qui affecteront le comportement de setTimeout(). Lorsque vous utilisez plusieurs setTimeout() qui se chevauchent, il est difficile d’être certain de leur ordre d’exécution, particulièrement si d’autres opérations asynchrones sont impliquées.
• « Callback Hell » : Si vous avez trop d’appels setTimeout() imbriqués, votre code peut devenir difficile à lire et à déboguer. Il sera également très difficile de suivre le déroulement de la logique dans votre application. L’utilisation excessive de setTimeout() peut aussi entraîner des problèmes de mémoire dans votre application si les appels ne sont pas correctement gérés.

Bien que setTimeout() puisse entraîner certains problèmes lors de son utilisation, en respectant les bonnes pratiques et les conventions de codage, vous pouvez minimiser ou éviter complètement ces inconvénients dans votre application.

Conclusion

La fonction setTimeout() est utile pour retarder l’exécution de fonctions. Elle est couramment utilisée pour la mise en œuvre d’animations, le chargement différé de contenus et la gestion des délais d’attente de requêtes.

Par exemple, vous pouvez utiliser setTimeout() pour afficher des alertes sur vos pages web. Bien que setTimeout() ne garantisse pas l’heure exacte d’exécution d’une fonction, il assure qu’elle aura lieu après un délai déterminé.

Vous pouvez également explorer les plateformes JavaScript ORM pour un codage efficace.