En tant que développeur web, la réactivité et l’interactivité de votre application web sont des éléments clés de l’expérience utilisateur. Pour améliorer l’expérience utilisateur de votre application, vous devrez ajouter des comportements dynamiques et contrôler l’heure à laquelle certains morceaux de code de votre application sont exécutés.
La méthode setTimeout() est un excellent outil pour cela, car elle permet de planifier l’exécution de code, d’orchestrer des animations, de créer des timers et de gérer des opérations asynchrones dans votre application.
Par conséquent, il est important de comprendre la syntaxe de setTimeout(), comment l’utiliser et comment vous pouvez l’appliquer dans votre prochain projet. Cet article va explorer cela et vous doter des connaissances nécessaires pour vous permettre de tirer le meilleur parti de la méthode setTimeout().
Table des matières
Fonction setTimeout de JavaScript
setTimeout() est une méthode globale liée à l’objet window et elle est utilisée pour exécuter une fonction ou un morceau de code, après une certaine période. Par exemple, si vous souhaitez exécuter une fonction après quatre secondes, setTimeout() est la méthode que vous utiliserez pour y parvenir.
Lorsqu’elle est utilisée, la méthode setTimeout() définit un minuteur qui compte à rebours jusqu’à ce que le temps que vous spécifiez se soit écoulé, puis exécute la fonction ou le code que vous lui avez transmis.
Être une méthode globale signifie que setTimeout() se trouve dans l’objet global et est donc disponible partout sans avoir besoin d’importation. L’objet global, qui est fourni par le modèle d’objet de document (DOM) dans le navigateur, est référencé par la fenêtre de nom de propriété.
Par conséquent, nous pouvons utiliser window.setTimeout() ou simplement setTimeout() car la fenêtre d’objet global sera impliquée. window.setTimeout() et setTimeout() n’ont aucune différence.
La syntaxe générale de setTimeout() est la suivante :
setTimeout(function, delay)
- fonction – c’est la fonction à exécuter après un temps donné.
- delay – temps en millisecondes après lequel la fonction passée doit être exécutée. 1 seconde équivaut à 1000 millisecondes.
Lorsque vous utilisez setTimeout(), le délai que vous spécifiez doit être une valeur numérique pour éviter des résultats indésirables. L’argument délai est facultatif. S’il n’est pas spécifié, sa valeur par défaut est 0 et la fonction transmise est exécutée immédiatement.
setTimeout() renvoie un identifiant unique appelé timeoutID, qui est un entier positif qui identifie de manière unique le temporisateur créé lorsqu’une méthode setTimeout() est appelée.
Il est également important de noter que setTimeout() est asynchrone. Son temporisateur n’arrête pas l’exécution des autres fonctions dans la pile des appels.
Comment utiliser setTimeout()
Regardons des exemples montrant comment utiliser la méthode setTimeout() :
// setTimeout() with a function declaration
setTimeout(function () {
console.log("Hello World after 3 seconds");
}, 3000)
// setTimeout() with an arrow function
setTimeout(() => {
console.log("Hello World in an arrow function - 1 second")
}, 1000)Sortir:
Hello World in an arrow function - 1 second Hello World after 3 seconds
Dans la sortie ci-dessus, le deuxième setTimeout() déconnecte sa sortie en premier car il a un délai plus court de 1 seconde, par rapport au premier qui a un délai de 3 secondes. Comme indiqué précédemment, setTimeout() est asynchrone. Lorsque le premier setTimeout() avec un délai de 3 secondes est appelé, un temporisateur de 3 secondes est lancé mais il n’arrête pas l’exécution de l’autre code du programme.
Lorsque la méthode compte à rebours à partir de 3, le reste du code de la pile d’appels est exécuté. Dans cet exemple, le morceau de code suivant est le second setTimeout() avec un délai de 1 seconde. Comme il a un délai beaucoup plus court, c’est pourquoi son code est exécuté avant le premier setTimeout()
Lorsque vous utilisez setTimeout(), vous n’avez pas besoin d’écrire directement la fonction dans la méthode setTimeout().
// function declaration
function greet() {
console.log("Hello there!")
}
// store a function in a variable - function expression
const speak = function () {
console.log("How are you doing?")
}
// using an arrow function
const signOff = () => {
console.log("Yours Sincerely: toptips.fr:)")
}
// pass in a function reference to setTimeout()
setTimeout(greet, 1000)
setTimeout(speak, 2000)
setTimeout(signOff, 3000)Sortir:
Hello there! How are you doing? Yours Sincerely: toptips.fr:)
Lorsque nous définissons une méthode ailleurs, puis la passons setTimeout(), ce que nous passons dans la méthode setTimeout() est une référence à la fonction que nous voulons exécuter après un temps donné.
setTimeout() avec des paramètres supplémentaires
setTimeout() a une syntaxe alternative qui vous permet de passer des paramètres supplémentaires dans la méthode setTimeout(). Ces paramètres vont être utilisés dans la fonction que vous exécutez après le délai.
La syntaxe est la suivante :
setTimeout(functionRef, delay, param1, param2, /* …, */ paramN)
Vous pouvez transmettre un nombre donné de paramètres supplémentaires en fonction du nombre d’arguments requis par la fonction que vous référencez.
Considérez la fonction ci-dessous :
function greet (name, message) {
console.log(`Hello ${name}, ${message}`)
}Si vous souhaitez exécuter la fonction ci-dessus après un certain temps en utilisant setTimeout(), vous pouvez le faire comme indiqué ci-dessous :
// setTimeOut() with additional parameters
function greet (name, message) {
console.log(`Hello ${name}, ${message}`)
}
setTimeout(greet, 2000, "John", "happy coding!");Sortir:
Hello John, happy coding!
N’oubliez pas que si nous définissons une fonction ailleurs et que nous la transmettons ensuite à setTimeout(), ce que nous transmettons est simplement une référence à la fonction. Dans l’exemple ci-dessus, nous passons la référence greet et non greet(), qui appelle la fonction. Nous voulons que setTimeout() soit celui qui appelle la fonction en utilisant sa référence.
C’est pourquoi nous ne pouvons pas passer directement les paramètres supplémentaires, comme indiqué ci-dessous :
// This results in an ERR_INVALID_ARG_TYPE error
setTimeout(greet("John", "happy coding!"), 2000);Dans le code ci-dessus, la fonction d’accueil est exécutée immédiatement sans attendre que 2 secondes 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()
On peut empêcher l’exécution d’une fonction planifiée à l’aide de setTimeout() en utilisant la méthode clearTimeout(). Une telle chose peut être nécessaire si nous avons défini une fonction pour qu’elle s’exécute après une certaine période, mais nous ne voulons pas que la fonction s’exécute après que certaines conditions ont été remplies ou que les conditions ont changé.
La syntaxe de la méthode clearTimeout() est la suivante :
clearTimeout(timeoutID)
clearTimeout() prend un seul argument, timeoutID, qui est l’identifiant unique renvoyé par la méthode setTimeout().
Considérez l’exemple ci-dessous :
function text() {
console.log("This is not going to be printed")
}
function greet() {
console.log("Hello after 5 seconds")
}
// Schedule the function text() to be executed after 3 seconds
const timeOutID = setTimeout(text, 3000);
// cancelt text() timeout time using clearTimeout()
clearTimeout(timeOutID)
console.log(`${timeOutID} cleared out`)
// Schedule the function greet() to be executed after 5 seconds
setTimeout(greet, 5000)Sortir:
2 cleared out Hello after 5 seconds
La fonction text() n’est pas exécutée car clearTimeout() est utilisé pour annuler son timeout, empêchant ainsi son exécution.
Avantages de l’utilisation de setTimeout()
Certains des avantages de l’utilisation de la méthode setTimeout() incluent :
- Retarder l’exécution du code – la fonction principale de setTimeout() est de permettre aux développeurs de retarder l’exécution du code. Il s’agit d’une fonctionnalité cruciale lors de la création d’animations, de la gestion d’événements chronométrés et du contrôle du flux de code asynchrone. setTimeout() libère également le thread principal pour exécuter un autre code.
- Implémentation de la minuterie – setTimeout () fournit un moyen simple d’implémenter des minuteries simples dans une application sans avoir besoin d’utiliser des bibliothèques externes ou d’effectuer des opérations de date complexes.
- Limitation et anti-rebond – setTimeout() peut être utilisé pour limiter le nombre d’appels de certaines fonctions ou d’actions exécutées, en particulier lors d’événements tels que le défilement ou la saisie. Avec l’anti-rebond, votre application attend un certain temps avant d’appeler une fonction. La limitation limite le nombre d’appels de fonction effectués au cours d’une période donnée. setTimeout() peut être utilisé pour réaliser ces deux
- Améliorer l’expérience utilisateur – setTimeout() vous permet d’améliorer l’expérience utilisateur de votre application en contrôlant le moment où certaines actions se produisent, telles que l’affichage des notifications, des alertes, des messages contextuels et des animations. Ceci est pratique pour éviter la surcharge d’informations sur les utilisateurs, améliorant ainsi l’expérience utilisateur.
- Améliorer les performances Web – setTimeout () peut être utilisé pour améliorer les performances et la réactivité globale des applications Web en décomposant les problèmes complexes en problèmes beaucoup plus simples. Ces petits problèmes peuvent être traités à l’intérieur d’un setTimeout(), permettant à d’autres parties de code de continuer l’exécution, n’affectant ainsi pas les performances ou la réactivité d’une application.
De toute évidence, setTimeout() est à la fois puissant et très utile lors de la création d’applications utilisant JavaScript.
Inconvénients de l’utilisation de setTimeout()
Certains des inconvénients de l’utilisation de setTimeout() incluent :
- Timing inexact – setTimeout() ne peut pas garantir l’heure exacte à laquelle une fonction sera appelée ou une opération effectuée. Parfois, d’autres codes mal écrits conduisent à des conditions de concurrence qui affecteront le fonctionnement de setTimeout(). Lorsque vous utilisez plusieurs setTimeout() qui se chevauchent, vous ne pouvez pas toujours être sûr de l’ordre d’exécution, en particulier 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 flux de la logique dans votre application. L’utilisation d’un trop grand nombre de setTimeout() peut également entraîner des problèmes de mémoire dans votre application si les appels setTimeout() ne sont pas gérés correctement.
Alors que setTimeout() peut éviter certains problèmes lors de son utilisation, en vous en tenant aux meilleures pratiques et aux bonnes pratiques de codage, vous pouvez minimiser ou éviter complètement les inconvénients de votre application.
Conclusion
La méthode setTimeout() peut être utilisée pour retarder l’exécution des fonctions. setTimeout est couramment utilisé pour les animations, le chargement différé du contenu et la gestion des délais d’expiration des requêtes.
Par exemple, vous pouvez utiliser setTimeout() pour afficher des alertes sur vos pages Web. Alors que setTimeout() ne garantit pas l’heure exacte d’exécution d’une fonction, il garantit son exécution après un délai défini.
Vous pouvez également explorer les plates-formes JavaScript ORM pour un codage efficace.