Minuteurs
La bouilloire est un paragraphe, #pot. Le script y écrit cold. Ici, pas de formulaire et pas de cloche de boutique.
Un minuteur ne met pas le script en pause. La ligne suivante part tout de suite. La fonction part plus tard. Un délai de 400 millisecondes écrit hot. On l’annule, la bouilloire reste cold. Un intervalle compte 1, 2, 3 puis s’arrête. La ligne devient cold / hot / 3.
Pas la cloche
La page précédente a réuni same / 4 / undefined / number. C’étaient le document, un var, un let et le type de la largeur. Cette page ne les lit pas. cold et hot sont des mots que le minuteur écrit sur la bouilloire.
La question change : quand le mot change-t-il ?
La ligne suivante n’attend pas
setTimeout demande une fonction et un délai en millisecondes. 400, ce sont quatre dixièmes de seconde, pas 400 secondes. Le journal sous l’appel part en premier, la bouilloire est encore cold. La fonction écrit hot et le journalise plus tard.
let pot = document.getElementById("pot");
pot.textContent = "cold";
setTimeout(function () {
pot.textContent = "hot";
console.log(pot.textContent);
}, 400);
console.log(pot.textContent);
Le premier journal est cold. Le suivant est hot. Le script ne s’est pas assis pendant 400 millisecondes.
Annuler l’ébullition
setTimeout renvoie un identifiant. clearTimeout avec cet identifiant écarte la fonction. La bouilloire était cold, et hot n’arrive pas.
let pot = document.getElementById("pot");
pot.textContent = "cold";
let boil = setTimeout(function () {
pot.textContent = "hot";
}, 400);
clearTimeout(boil);
console.log(pot.textContent);
Le journal est cold. La fonction a été écartée, donc la bouilloire ne devient pas hot.
Compter trois versements
setInterval rappelle la fonction sans cesse, ici toutes les 300 millisecondes. Chaque appel ajoute un. À 3, clearInterval l’arrête. Le journal est ce 3, pas une montée sans fin.
let pot = document.getElementById("pot");
let n = 0;
let tick = setInterval(function () {
n = n + 1;
pot.textContent = String(n);
if (n === 3) {
clearInterval(tick);
console.log(pot.textContent);
}
}, 300);
Le journal est 3. L’identifiant de l’intervalle est tick. Sans clearInterval, le compte continuerait.
L’identifiant est un nombre
La valeur renvoyée par setTimeout est un nombre. Ce n’est pas le délai, ni le mot hot. Cet extrait programme une fonction vide seulement pour lire le type, puis l’annule.
let boil = setTimeout(function () {}, 400);
console.log(typeof boil);
clearTimeout(boil);
Le journal est number.
Zéro reste plus tard
Un délai de 0 ne veut pas dire « avant la ligne suivante ». La fonction attend la fin de ce script. La bouilloire devient now, ce mot est journalisé, et ensuite la fonction journalise later.
let pot = document.getElementById("pot");
pot.textContent = "now";
setTimeout(function () {
console.log("later");
}, 0);
console.log(pot.textContent);
Le premier journal est now. Le second est later. Le zéro n’a pas doublé la file.
Ce que veut dire un délai
L’unité est la milliseconde. La ligne de la bouilloire est celle qu’utilise cette page.
📊 Ce que veut dire un délai
| Délai | Il veut dire | Facile à confondre |
|---|---|---|
| 0 | après la fin de ce script | avant la ligne suivante |
| 400 | 0,4 seconde | 400 secondes |
| 1000 | une seconde | une minute |
La ligne sous la bouilloire
Le script écrit cold et range ce mot tout de suite. Le délai de 400 millisecondes range hot. L’intervalle ajoute un toutes les 300 millisecondes, s’arrête à 3, puis joint les trois mots. hot est rangé avant le troisième versement, parce que 400 est plus petit que 900.
<!DOCTYPE html>
<html>
<head>
<title>kettle-timer — page</title>
</head>
<body>
<p id="pot">blank</p>
<p id="line">…</p>
<script>
let pot = document.getElementById("pot");
let seen = [];
pot.textContent = "cold";
seen.push(pot.textContent);
setTimeout(function () {
pot.textContent = "hot";
seen.push("hot");
}, 400);
let n = 0;
let tick = setInterval(function () {
n = n + 1;
if (n === 3) {
clearInterval(tick);
seen.push(String(n));
document.getElementById("line").textContent = seen.join(" / ");
}
}, 300);
</script>
</body>
</html>
La ligne est cold / hot / 3. Cold était immédiat. Hot venait du délai. 3 venait de l’intervalle. Le mot blank a disparu. same / 4 / undefined / number est la page précédente.
Au comptoir
- Mets la bouilloire à cold, programme hot pour 400 millisecondes et journalise tout de suite. Le premier journal est cold. Le suivant est hot.
- Programme hot, puis appelle
clearTimeoutavant qu’il parte. Le journal reste cold. - Compte avec
setIntervalet arrête à 3. Le journal est 3. - Lis
typeofde l’identifiant. Le journal est number. - Utilise un délai de 0. Les journaux sont now, puis later.
- Lis la ligne de la page : cold / hot / 3.
Ratés au comptoir
La bouilloire montre cold, hot ou un compte. Pas la ligne de la cloche.
- Attendre que le premier journal soit hot
- Oublier
clearTimeout, et qu’une ébullition qu’on voulait annuler écrive quand même hot - Laisser l’intervalle dépasser 3
- Lire 400 comme 400 secondes
- Prendre un délai de 0 pour « avant la ligne suivante »
- Lire la ligne comme same / 4 / undefined / number
À retenir
- La ligne suivante part avant la fonction du timeout
clearTimeoutécarte cette fonction, la bouilloire reste coldclearIntervalarrête le compte à 3- L’identifiant de
setTimeoutest un nombre - Un délai de 0 journalise quand même now avant later
- La ligne de la page est cold / hot / 3
🧠 Testez Vos Connaissances
Testez Vos Connaissances
Mettez-vous au défi avec ce quiz interactif et voyez à quel point vous comprenez le sujet
📝 Instructions
- Lisez chaque question attentivement
- Sélectionnez la meilleure réponse pour chaque question
- Vous pouvez refaire le quiz autant de fois que vous le souhaitez
- Votre progression sera affichée en haut