Загрузка...

Колбэки

Чашка — абзац #cup, и она начинается как blank. Таймера чайника на этой странице нет.
serve берёт заказ и функцию. Эта функция — колбэк: ты её отдаёшь, а serve вызывает. Вызов происходит до возврата serve, поэтому следующая строка уже видит напиток. Строка читается lida tea / poured.

Не чайник

Прошлая страница сразу писала cold и hot только через 400 миллисекунд. Её строка была cold / hot / 3. Таймер ждёт. serve не ждёт. Если ищешь setTimeout, это не та стойка.
Вопрос: кто вызывает функцию, которую ты передал?

Имя параметра — только имя

Внутри serve параметр зовут done. На месте вызова у функции нет имени. serve имя не важно. Важно, что получена функция и что её вызывают с одним аргументом: заказ плюс слово tea.

Вызов до возврата

done(order + " tea") выполняется, чашка наполняется, и только потом serve заканчивается. Журнал под вызовом уже содержит напиток.

Передать функцию

javascript 
function serve(order, done) {
done(order + " tea");
}
let cup = document.getElementById("cup");
serve("lida", function (drink) {
cup.textContent = drink;
});
console.log(cup.textContent);

Журнал — lida tea. Чашка не осталась blank, и никто не ждал.

Забыть вызов

Этот serve собирает напиток и останавливается. done он не вызывает. Функция, которую ты передал, так и лежит. Чашку до вызова поставили в blank, и она blank остаётся.

Не вызывать done

javascript 
function serve(order, done) {
order = order + " tea";
}
let cup = document.getElementById("cup");
cup.textContent = "blank";
serve("lida", function (drink) {
cup.textContent = drink;
});
console.log(cup.textContent);

Журнал — blank. Ошибка не бросается. Колбэк, который не вызвали, просто не выполняется. Строка напитка была собрана, и её никто не принял.

Вторая функция, после первой

serve может взять две функции. Сначала вызывает done с напитком. after вызывает только когда этот вызов вернулся. after напиток не получает. Только отмечает, что налили.

done, затем after

javascript 
function serve(order, done, after) {
done(order + " tea");
after();
}
let seen = [];
serve(
"lida",
function (drink) {
seen.push(drink);
},
function () {
seen.push("poured");
}
);
console.log(seen.join(" / "));

Журнал — lida tea / poured. Поменяй два вызова внутри serve — слова поменяются. Порядок — это порядок вызовов, не порядок, в котором ты написал выражения функций.

Что склеивает страница

Страница использует второй serve, с done и after. Кладёт напиток, потом poured и пишет строку. Задержки между ними нет.

Строка под чашкой

Скрипт в конце body. serve вызывает обе функции до склейки строки.

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

html 
<!DOCTYPE html>
<html>
<head>
<title>serve-cup — page</title>
</head>
<body>
<p id="cup">blank</p>
<p id="line">…</p>
<script>
function serve(order, done, after) {
done(order + " tea");
after();
}
let seen = [];
serve(
"lida",
function (drink) {
seen.push(drink);
},
function () {
seen.push("poured");
}
);
document.getElementById("line").textContent = seen.join(" / ");
document.getElementById("cup").textContent = seen[0];
</script>
</body>
</html>

Строка читается lida tea / poured. Чашка показывает lida tea. Слово blank исчезло. cold / hot / 3 — прошлая страница.

У стойки

  1. Передай serve функцию и дай вызвать её с напитком. Журнал — lida tea.
  2. Возьми serve, который никогда не вызывает done. Журнал остаётся blank.
  3. Передай done и after. Журнал — lida tea / poured.
  4. Прочитай строку страницы: lida tea / poured.

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

Чашка показывает напиток или остаётся blank. Счёт интервала она не показывает.

  • Ждать, что журнал под serve всё ещё blank, хотя done уже вызван
  • Думать, что колбэк выполнится, даже если serve его не вызывает
  • Ждать 400 миллисекунд ради lida tea
  • Поставить poured перед напитком, вызвав after первым
  • Читать строку как cold / hot / 3

Оставь это

  • Колбэк — функция, которую ты передаёшь, чтобы её вызвал кто-то другой
  • serve вызывает done до возврата, поэтому следующая строка уже видит lida tea
  • Если done не вызван, чашка остаётся blank и ошибки нет
  • after выполняется только после возврата done
  • Строка страницы — lida tea / poured

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

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

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

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

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

📝 Инструкции

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