Загрузка...

Таймеры

Чайник — это абзац #pot. Скрипт пишет в него cold. Здесь нет формы и нет колокольчика лавки.
Таймер не останавливает скрипт. Следующая строка идёт сразу. Функция идёт позже. Таймаут в 400 миллисекунд пишет hot. Отменишь — чайник остаётся cold. Интервал считает 1, 2, 3 и останавливается. Строка читается cold / hot / 3.

Не колокольчик

Прошлая страница собрала same / 4 / undefined / number. Это были документ, var, let и тип ширины. Эта страница их не читает. cold и hot — слова, которые таймер пишет на чайник.
Новый вопрос: когда слово меняется?

Следующая строка не ждёт

setTimeout просит функцию и задержку в миллисекундах. 400 — это четыре десятых секунды, не 400 секунд. Журнал под вызовом идёт первым, чайник ещё cold. Функция позже пишет hot и журналирует это.

hot приходит позже

javascript 
let pot = document.getElementById("pot");
pot.textContent = "cold";
setTimeout(function () {
pot.textContent = "hot";
console.log(pot.textContent);
}, 400);
console.log(pot.textContent);

Первый журнал — cold. Поздний — hot. Скрипт не сидел 400 миллисекунд.

Отмени кипение

setTimeout возвращает идентификатор. clearTimeout с этим идентификатором отбрасывает функцию. Чайник стал cold, и hot не приходит.

Отменить до кипения

javascript 
let pot = document.getElementById("pot");
pot.textContent = "cold";
let boil = setTimeout(function () {
pot.textContent = "hot";
}, 400);
clearTimeout(boil);
console.log(pot.textContent);

Журнал — cold. Функцию отбросили, чайник не становится hot.

Три налива

setInterval зовёт функцию снова и снова, здесь каждые 300 миллисекунд. Каждый вызов прибавляет один. На 3 clearInterval останавливает. Журнал — эта 3, не бесконечный рост.

Остановиться на трёх

javascript 
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);

Журнал — 3. Идентификатор интервала — tick. Без clearInterval счёт рос бы дальше.

Идентификатор — число

Значение, которое возвращает setTimeout, — число. Это не задержка и не слово hot. Этот фрагмент ставит пустую функцию только чтобы прочитать тип, потом отменяет её.

Идентификатор таймера

javascript 
let boil = setTimeout(function () {}, 400);
console.log(typeof boil);
clearTimeout(boil);

Журнал — number.

Ноль всё равно позже

Задержка 0 не значит «до следующей строки». Функция ждёт, пока этот скрипт кончится. Чайник становится now, это слово журналируется, и только потом функция журналирует later.

Нулевая задержка

javascript 
let pot = document.getElementById("pot");
pot.textContent = "now";
setTimeout(function () {
console.log("later");
}, 0);
console.log(pot.textContent);

Первый журнал — now. Второй — later. Ноль не перепрыгнул очередь.

Что значит задержка

Единица — миллисекунда. Строка чайника — та, которую использует эта страница.

📊 Что значит задержка

Задержка Значит Легко перепутать
0 после конца этого скрипта до следующей строки
400 0,4 секунды 400 секунд
1000 одна секунда одна минута

Строка под чайником

Скрипт пишет cold и сохраняет это слово сразу. Таймаут в 400 миллисекунд сохраняет hot. Интервал прибавляет один каждые 300 миллисекунд, останавливается на 3 и склеивает три слова. hot сохраняется раньше третьего налива, потому что 400 меньше 900.

Демо страницы — таймер чайника

html 
<!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>

Строка читается cold / hot / 3. Cold был сразу. Hot пришёл из таймаута. 3 пришла из интервала. Слово blank исчезло. same / 4 / undefined / number — прошлая страница.

У стойки

  1. Поставь чайник в cold, запланируй hot на 400 миллисекунд и журналируй сразу. Первый журнал — cold. Поздний — hot.
  2. Запланируй hot и вызови clearTimeout до запуска. Журнал остаётся cold.
  3. Считай через setInterval и остановись на 3. Журнал — 3.
  4. Прочитай typeof идентификатора. Журнал — number.
  5. Возьми задержку 0. Журналы — now, потом later.
  6. Прочитай строку страницы: cold / hot / 3.

Промахи у стойки

Чайник показывает cold, hot или счёт. Не строку колокольчика.

  • Ждать, что первый журнал будет hot
  • Забыть clearTimeout, и кипение, которое хотел отменить, всё же пишет hot
  • Дать интервалу уйти за 3
  • Читать 400 как 400 секунд
  • Считать задержку 0 «до следующей строки»
  • Читать строку как same / 4 / undefined / number

Оставь это

  • Следующая строка идёт до функции таймаута
  • clearTimeout отбрасывает эту функцию, чайник остаётся cold
  • clearInterval останавливает счёт на 3
  • Идентификатор setTimeout — число
  • Задержка 0 всё равно журналирует now раньше later
  • Строка страницы — cold / hot / 3

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
7
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 56 из 58
Javascript Урок