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

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 le moment où 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 programmer l'exécution de code, d'orchestrer des animations, de créer des timers et de gérer asynchrone opérations 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().

JavaScript’s setTimeout Function

setTimeout () est une méthode globale liée à l'objet window et elle permet d'exécuter une fonction ou un morceau de code, après un certain temps. 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 Document Object Model (DOM) dans le navigateur, est référencé par le nom de la propriété fenêtre.

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é. 
• retarder – temps en millisecondes au bout duquel la fonction passée doit être exécutée. 1 seconde équivaut à 1000 millisecondes.

Lors de l'utilisation setTimeout () le délai que vous spécifiez doit être une valeur numérique pour éviter des résultats indésirables. Le retarder l'argument 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é ID de délai d'attente, qui est un entier positif qui identifie de manière unique le minuteur 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.

How To Use 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)

Sortie :

Hello World in an arrow function - 1 second
Hello World after 3 seconds

Dans la sortie ci-dessus, la 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 deuxième setTimeout () avec un retard de 1 seconde. Comme il a un délai beaucoup plus court, c'est pourquoi son code est exécuté avant le premier setTimeout()

Lors de l'utilisation 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: Geekflare:)")
}

// pass in a function reference to setTimeout()
setTimeout(greet, 1000)
setTimeout(speak, 2000)
setTimeout(signOff, 3000)

Sortie :

Hello there!
How are you doing?
Yours Sincerely: Geekflare:)

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() With Additional Parameters

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!");

Sortie :

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 :

Cancelling setTimeout()

Nous pouvons 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 pour clearTimeout () méthode est comme indiqué ci-dessous:

clearTimeout(timeoutID)

clearTimeout() prend un seul argument, ID de délai d'attente, 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)

Sortie :

2 cleared out
Hello after 5 seconds

La fonction text() n'est pas exécutée comme clearTimeout () est utilisé pour annuler son timeout, empêchant ainsi son exécution.

Advantages of Using 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.
• Mise en œuvre de la minuterie – setTimeout() fournit un moyen simple d'implémenter des temporisateurs 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 la expérience utilisateur de votre application en contrôlant le moment où certaines actions se produisent, telles que le moment où les notifications, les alertes, les messages contextuels et les animations sont affichés. 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.

Disadvantages of Using 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.
• L'enfer des rappels – 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 Plateformes JavaScript ORM pour un codage efficace.