Back to Basics: À quoi sert setTimeout en JavaScript ?

Article archivé

Dans ce Back to Basics, on revient sur ce qu'est la fonction setTimeout et pourquoi son utilisation peut-être intéressante.

En JavaScript, nous avons la boucle d'événements (event loop en bon anglais).

Ainsi, sans les Web Workers, JavaScript est un langage à un seul thread, non bloquant, asynchrone et concurrent.

Que puis-je faire avec la fonction setTimeout ?

Je peux lancer l'exécution d'une partie de votre code après un délai.

Le délai peut être plus long que prévu.

setTimeout(() => console.log("Après le délai"), 5000);

console.log("Avant le délai");

// Imprimé => 'Avant le délai'
// Après ≈ 5 secondes => 'Après le délai'

Encore une chose

Il arrive de rencontrer ce genre de code :

setTimeout(() => {
  someHTMLNode.style.color = "jaune";
}, 0);

Nous manipulons une propriété d'un élément node (c'est un élément DOM). Mais le DOM n'est pas prêt, someHTMLNode n'existe pas.

Le setTimeout(fn, 0) est un contournement, nous pouvons retarder notre affection après le rendu du DOM !

C'est tout, faites-en bon usage !