Состояния загрузки, ошибки, debounce

01 Четыре состояния экрана

Представьте, что вы открыли приложение такси и нажали «Заказать». Что вы видите? Крутилку «ищем машину». Если машин рядом нет — сообщение «Свободных машин нет, попробуйте позже». Если пропал интернет — «Нет соединения» и кнопка «Повторить». И только если всё хорошо — карточку водителя. Один и тот же экран, четыре разных картинки — в зависимости от того, что сейчас происходит с данными.

Новички обычно рисуют только последнюю картинку — «данные пришли». А остальные три забывают. В итоге при медленном интернете пользователь смотрит на пустую страницу и думает, что сайт сломан. Профессионал всегда продумывает все четыре:

Где хранить состояние

Из урока про состояние (урок 11) вы знаете главное правило: есть данные — есть функция, которая по ним рисует экран. Здесь так же. Заводим один объект state с тремя полями и одну функцию view (или render), которая решает, что показывать.

// status: "idle" | "loading" | "success" | "error"
function view(state) {
  if (state.status === "idle") return "Введите название блюда";
  if (state.status === "loading") return "Загрузка…";
  if (state.status === "error") return `Ошибка: ${state.error}`;
  // дальше status === "success"
  if (state.data.length === 0) return "Ничего не найдено";
  return `Нашли: ${state.data.join(", ")}`;
}

console.log(view({ status: "idle", data: [], error: null }));
console.log(view({ status: "loading", data: [], error: null }));
console.log(view({ status: "error", data: [], error: "Нет сети" }));
console.log(view({ status: "success", data: [], error: null }));
console.log(view({ status: "success", data: ["Курутоб"], error: null }));

Обратите внимание: «empty» — это не отдельный статус сервера, а частный случай успеха: запрос прошёл, но список оказался пустым. Хотите — выделяйте его отдельным статусом "empty" (так будет удобнее в разметке), хотите — проверяйте data.length. Главное, чтобы пользователь увидел разный текст.

Порядок проверок важен

Самая частая ошибка — проверять «пусто?» первой. Пока данные грузятся, список тоже пустой, и пользователь видит «Ничего не найдено» вместо «Загрузка…». Сначала спрашиваем «что случилось с запросом?» (loading, error), и только потом — «что внутри ответа?» (пусто или нет).

function view(state) {
  if (state.data.length === 0) return "Ничего не найдено";
  if (state.status === "loading") return "Загрузка…";
  return state.data.join(", ");
}
console.log(view({ status: "loading", data: [] }));
// → Ничего не найдено 😕

function view(state) {
  if (state.status === "loading") return "Загрузка…";
  if (state.data.length === 0) return "Ничего не найдено";
  return state.data.join(", ");
}
console.log(view({ status: "loading", data: [] }));
// → Загрузка… ✓

Переходы между состояниями

Состояния сменяют друг друга по простому сценарию. Запомните его — он будет в каждом приложении, которое вы напишете:

1. Пользователь что-то сделал (открыл страницу, нажал «Найти») → ставим status: "loading" и перерисовываем экран.
2. Сервер ответил → ставим status: "success" (или "empty") и кладём данные.
3. Что-то сломалось → ставим status: "error" и кладём понятный текст ошибки.
4. Пользователь нажал «Повторить» → снова шаг 1.

Читать подробнее: MDN: aria-busy — как сообщить о загрузке вспомогательным технологиям · learn.javascript.ru: Fetch

const states = [
  { status: "loading" },
  { status: "success", data: [] },
  { status: "success", data: ["Курутоб", "Нон"] },
  { status: "error", error: "Нет сети" },
];
function label(s) {
  if (s.status === "loading") return "Загрузка…";
  if (s.status === "error") return `Ошибка: ${s.error}`;
  if (s.data.length === 0) return "Ничего не найдено";
  return `Найдено: ${s.data.length}`;
}
const prediction = ["", "", "", ""];   // ваш прогноз: четыре подписи по порядку
const actual = states.map(label);
console.log(actual.join("|") === prediction.join("|") ? "Верно!" : "Не угадали, подумайте ещё");

Верно!

// function view(state) { ... }

console.log(view({ status: "idle", query: "", data: [], error: null }));
console.log(view({ status: "loading", query: "нон", data: [], error: null }));
console.log(view({ status: "error", query: "нон", data: [], error: "Сервер не отвечает" }));
console.log(view({ status: "success", query: "борщ", data: [], error: null }));
console.log(view({ status: "success", query: "н", data: ["Курутоб", "Нон"], error: null }));

Введите запрос
Загрузка…
Ошибка: Сервер не отвечает
Ничего не найдено по запросу «борщ»
Блюда: Курутоб, Нон

function view(state) {
  if (state.data.length === 0) return "Ничего не найдено";
  if (state.status === "loading") return "Загрузка…";
  if (state.status === "error") return `Ошибка: ${state.error}`;
  return state.data.join(", ");
}

console.log(view({ status: "loading", data: [], error: null }));
console.log(view({ status: "error", data: [], error: "Нет сети" }));
console.log(view({ status: "success", data: [], error: null }));
console.log(view({ status: "success", data: ["Нон"], error: null }));

Загрузка…
Ошибка: Нет сети
Ничего не найдено
Нон

// function next(state, event) { ... }

let s = { status: "idle", data: [], error: null };
const events = [
  { type: "start" },
  { type: "done", data: ["Нон", "Курутоб"] },
  { type: "start" },
  { type: "fail", error: "Нет сети" },
];
for (const e of events) {
  s = next(s, e);
  console.log(e.type, "→", s.status, s.data.length, s.error);
}

start → loading 0 null
done → success 2 null
start → loading 2 null
fail → error 2 Нет сети

02 Запрос, ошибки и «медленный сервер»

Теперь подключаем реальную загрузку. Из прошлых уроков вы знаете схему: async-функция, await fetch(...), try / catch. Добавим к ней состояния: до запроса ставим loading, после — success или error, а finally нам тут почти не нужен: каждое состояние ставится явно.

async function searchProducts(query) {
  console.log("loading");
  try {
    const res = await fetch(`https://dummyjson.com/products/search?q=${query}&limit=3`);
    const data = await res.json();
    console.log(`success: ${data.products.length} из ${data.total}`);
  } catch (err) {
    console.log(`error: ${err.message}`);
  }
}

searchProducts("phone");

Две разные ошибки — и fetch различает их не так, как вы думаете

Это ловушка, в которую попадает почти каждый новичок. У запроса бывает два разных вида неудачи:

Сети нет

Интернет пропал, сервер не найден, запрос не дошёл. Тогда fetch отклоняет промис — управление уходит в catch.

Сервер ответил «нет»

Запрос дошёл, но сервер вернул код 404 («не найдено») или 500 («у нас всё сломалось»). Для fetch это успех: ответ получен! Промис выполняется, в catch мы не попадаем.

Поэтому после fetch всегда проверяйте свойство res.ok — оно равно true для кодов 200–299. А если нет — бросайте ошибку сами:

async function loadProduct(id) {
  try {
    const res = await fetch(`https://dummyjson.com/products/${id}`);
    console.log("status:", res.status, "ok:", res.ok);
    if (!res.ok) throw new Error(`Сервер ответил кодом ${res.status}`);
    const product = await res.json();
    console.log("success:", product.title);
  } catch (err) {
    console.log("error:", err.message);
  }
}

loadProduct(999999);

Попробуйте заменить 999999 на 1: код станет 200, и вы увидите название товара.

«Медленный сервер» в нашем коде

Настоящий API отвечает то быстро, то медленно, то не отвечает вовсе. Чтобы уроки и задачи были честными и одинаковыми у всех, мы сделаем себе «ненастоящий» сервер — функцию fakeSearch. Она ищет блюдо в небольшом массиве, отвечает через заданное время и умеет ломаться по запросу «ошибка». Так делают и профессионалы: пока настоящего сервера нет (или он нестабилен), интерфейс проверяют на заглушке.

// ↓ «сервер»: медленный поиск по меню — не меняйте
const DISHES = ["Оши палав", "Самбуса с мясом", "Самбуса с тыквой", "Курутоб", "Шакароб", "Нон"];

function fakeSearch(query, { signal, ms = 200 } = {}) {
  return new Promise((resolve, reject) => {
    if (signal && signal.aborted) return reject(signal.reason);
    const timer = setTimeout(() => {
      if (query === "ошибка") return reject(new Error("Нет соединения с сервером"));
      resolve(DISHES.filter((d) => d.toLowerCase().includes(query.toLowerCase())));
    }, ms);
    if (signal) {
      signal.addEventListener("abort", () => {
        clearTimeout(timer);
        reject(signal.reason);
      });
    }
  });
}

fakeSearch("самбуса").then((dishes) => console.log("Нашли:", dishes.join(", ")));
fakeSearch("борщ").then((dishes) => console.log("Нашли по «борщ»:", dishes.length));
fakeSearch("ошибка").catch((err) => console.log("Сбой:", err.message));

Полный цикл: loading → success / empty / error

Склеим всё в одну функцию. Каждая строка состояния — это одна «картинка» экрана. Следите за порядком в консоли:

// ↓ «сервер»: медленный поиск по меню — не меняйте
const DISHES = ["Оши палав", "Самбуса с мясом", "Самбуса с тыквой", "Курутоб", "Шакароб", "Нон"];

function fakeSearch(query, { signal, ms = 200 } = {}) {
  return new Promise((resolve, reject) => {
    if (signal && signal.aborted) return reject(signal.reason);
    const timer = setTimeout(() => {
      if (query === "ошибка") return reject(new Error("Нет соединения с сервером"));
      resolve(DISHES.filter((d) => d.toLowerCase().includes(query.toLowerCase())));
    }, ms);
    if (signal) {
      signal.addEventListener("abort", () => {
        clearTimeout(timer);
        reject(signal.reason);
      });
    }
  });
}

async function load(query) {
  console.log("loading…");
  try {
    const items = await fakeSearch(query);
    if (items.length === 0) {
      console.log("empty: ничего не найдено");
    } else {
      console.log(`success: ${items.length} шт.`);
    }
  } catch (err) {
    console.log(`error: ${err.message}`);
  }
}

async function main() {
  await load("курутоб");
  await load("борщ");
  await load("ошибка");
}
main();

Повтор при сбое

Раз ошибка — частое дело, пользователю нужна кнопка «Повторить». В коде это просто ещё один вызов той же load. А иногда повтор делают автоматически — например, до трёх попыток подряд. Мы потренируем это в задаче 2.4.

Читать подробнее: learn.javascript.ru: Fetch · MDN: Response.ok

// ↓ «сервер»: медленный поиск по меню — не меняйте
const DISHES = ["Оши палав", "Самбуса с мясом", "Самбуса с тыквой", "Курутоб", "Шакароб", "Нон"];

function fakeSearch(query, { signal, ms = 200 } = {}) {
  return new Promise((resolve, reject) => {
    if (signal && signal.aborted) return reject(signal.reason);
    const timer = setTimeout(() => {
      if (query === "ошибка") return reject(new Error("Нет соединения с сервером"));
      resolve(DISHES.filter((d) => d.toLowerCase().includes(query.toLowerCase())));
    }, ms);
    if (signal) {
      signal.addEventListener("abort", () => {
        clearTimeout(timer);
        reject(signal.reason);
      });
    }
  });
}

async function main() {
  // await fakeSearch(...) и console.log
}
main();

Самбуса с мясом, Самбуса с тыквой

// ↓ «сервер»: медленный поиск по меню — не меняйте
const DISHES = ["Оши палав", "Самбуса с мясом", "Самбуса с тыквой", "Курутоб", "Шакароб", "Нон"];

function fakeSearch(query, { signal, ms = 200 } = {}) {
  return new Promise((resolve, reject) => {
    if (signal && signal.aborted) return reject(signal.reason);
    const timer = setTimeout(() => {
      if (query === "ошибка") return reject(new Error("Нет соединения с сервером"));
      resolve(DISHES.filter((d) => d.toLowerCase().includes(query.toLowerCase())));
    }, ms);
    if (signal) {
      signal.addEventListener("abort", () => {
        clearTimeout(timer);
        reject(signal.reason);
      });
    }
  });
}

// async function load(query) { ... }

async function main() {
  await load("курутоб");
  await load("ошибка");
  await load("борщ");
}
main();

loading
success: 1
loading
error: Нет соединения с сервером
loading
empty

const fakeHttp = (status) =>
  Promise.resolve({
    ok: status >= 200 && status < 300,
    status,
    json: () => Promise.resolve({ dishes: 3 }),
  });

// async function getJson(status) { ... }

async function main() {
  for (const status of [200, 404, 500]) {
    try {
      const data = await getJson(status);
      console.log(`${status} → ${data.dishes} блюда`);
    } catch (err) {
      console.log(`${status} → ошибка: ${err.message}`);
    }
  }
}
main();

200 → 3 блюда
404 → ошибка: HTTP 404
500 → ошибка: HTTP 500

let calls = 0;
function flakySearch() {
  calls++;
  return new Promise((resolve, reject) =>
    setTimeout(() => (calls < 3 ? reject(new Error("Нет сети")) : resolve(["Курутоб"])), 100)
  );
}

// async function searchWithRetry(maxAttempts) { ... }

searchWithRetry(4);

попытка 1: ошибка (Нет сети)
попытка 2: ошибка (Нет сети)
попытка 3: успех, найдено 1

03 Skeleton: серые заглушки вместо пустоты

Самое простое состояние загрузки — надпись «Загрузка…» или крутилка. Но у неё есть недостаток: страница «прыгает». Сначала на экране маленькая надпись, потом вдруг появляется длинный список, и всё содержимое съезжает вниз. Решение — skeleton («скелет»): на месте будущих карточек показываем серые прямоугольники такого же размера. Пользователь заранее видит, как будет выглядеть страница, а когда приходят данные — заглушки просто заменяются настоящими карточками на тех же местах.

Skeleton на чистом CSS

JavaScript здесь нужен только для одного: поставить на страницу нужное число блоков. Весь «вид» делает CSS. Секрет мерцания — градиент, который «ползёт» слева направо при помощи анимации:

.skeleton {
  /* светло-серый фон с более светлой полосой посередине */
  background: linear-gradient(90deg, #e6e9ef 25%, #f4f6fa 37%, #e6e9ef 63%);
  background-size: 400% 100%;      /* градиент в 4 раза шире блока */
  animation: shimmer 1.2s ease infinite;
  border-radius: 8px;
  color: transparent;              /* на случай, если внутри окажется текст */
}

@keyframes shimmer {
  0%   { background-position: 100% 0; }
  100% { background-position: 0 0; }
}

/* уважаем пользователей, которым неприятна анимация */
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

1. Градиент шире блока. background-size: 400% делает фон в четыре раза шире самого блока — виден только его кусочек.
2. Анимация двигает фон. @keyframes shimmer меняет background-position — «светлая полоса» медленно проезжает по блоку.
3. Размеры задаёт карточка. Заглушка должна быть той же высоты и ширины, что и настоящая карточка, — иначе страница всё равно «подпрыгнет».
4. Не забудьте про доступность. На контейнер ставим aria-busy="true" пока идёт загрузка и "false" — когда закончилась: читалки с экрана поймут, что содержимое обновляется.

Посмотрите на готовый пример. Нажмите «Запустить» — сначала вы увидите мерцающие серые карточки, а через 0,8 секунды — настоящие блюда.

<div id="list" class="list" aria-busy="true"></div>

.list { display: grid; gap: 10px; }
.card { height: 54px; padding: 14px 16px; border: 2px solid #ccd3df; border-radius: 12px; background: #fff; font-weight: 700; box-sizing: border-box; }
.skeleton {
  border-color: transparent;
  color: transparent;
  background: linear-gradient(90deg, #e6e9ef 25%, #f4f6fa 37%, #e6e9ef 63%);
  background-size: 400% 100%;
  animation: shimmer 1.2s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@media (prefers-reduced-motion: reduce) { .skeleton { animation: none; } }

const list = document.querySelector("#list");

// 1. загрузка: три заглушки
for (let i = 0; i < 3; i++) {
  const stub = document.createElement("div");
  stub.className = "card skeleton";
  list.append(stub);
}

// 2. через 0,8 секунды «приходят» данные
setTimeout(() => {
  const cards = ["Курутоб", "Самбуса", "Шакароб"].map((name) => {
    const card = document.createElement("div");
    card.className = "card";
    card.textContent = name;
    return card;
  });
  list.replaceChildren(...cards);
  list.setAttribute("aria-busy", "false");
}, 800);

Skeleton — это не единственное «красивое» состояние

Остальные состояния тоже стоит оформить, а не оставлять «голый» текст:

• Пусто (empty): короткая фраза и подсказка, что делать: «Ничего не найдено. Попробуйте другое название».
• Ошибка (error): понятная причина и кнопка «Повторить». Красный цвет — не обязательно, главное — чтобы было ясно, что можно сделать дальше.
• Начало (idle): приглашение к действию: «Введите название блюда».

Читать подробнее: MDN: использование CSS-анимаций · MDN: prefers-reduced-motion

<div id="list" class="list"></div>

.list { display: grid; gap: 10px; }
.card { height: 54px; border: 2px solid #ccd3df; border-radius: 12px; background: #fff; box-sizing: border-box; padding: 14px 16px; font-weight: 700; }
.skeleton {
  border-color: transparent;
  background: linear-gradient(90deg, #e6e9ef 25%, #f4f6fa 37%, #e6e9ef 63%);
  background-size: 400% 100%;
  animation: shimmer 1.2s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

const list = document.querySelector("#list");

function showSkeleton(count) {
  // очистите list, добавьте count блоков div.card.skeleton
  // и поставьте aria-busy="true"
}

showSkeleton(3);

// --- проверка (не удаляйте) ---
console.log(list.children.length);
console.log(list.querySelectorAll(".skeleton").length);
console.log(list.getAttribute("aria-busy"));

3
3
true

<div id="list" class="list"></div>

.list { display: grid; gap: 10px; }
.card { height: 54px; border: 2px solid #ccd3df; border-radius: 12px; background: #fff; box-sizing: border-box; padding: 14px 16px; font-weight: 700; }
.skeleton {
  border-color: transparent;
  background: linear-gradient(90deg, #e6e9ef 25%, #f4f6fa 37%, #e6e9ef 63%);
  background-size: 400% 100%;
  animation: shimmer 1.2s ease infinite;
}
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }

// ↓ «сервер»: медленный поиск по меню — не меняйте
const DISHES = ["Оши палав", "Самбуса с мясом", "Самбуса с тыквой", "Курутоб", "Шакароб", "Нон"];

function fakeSearch(query, { signal, ms = 200 } = {}) {
  return new Promise((resolve, reject) => {
    if (signal && signal.aborted) return reject(signal.reason);
    const timer = setTimeout(() => {
      if (query === "ошибка") return reject(new Error("Нет соединения с сервером"));
      resolve(DISHES.filter((d) => d.toLowerCase().includes(query.toLowerCase())));
    }, ms);
    if (signal) {
      signal.addEventListener("abort", () => {
        clearTimeout(timer);
        reject(signal.reason);
      });
    }
  });
}

const list = document.querySelector("#list");
const count = (selector) => list.querySelectorAll(selector).length;

function showSkeleton(n) {
  const stubs = Array.from({ length: n }, () => {
    const stub = document.createElement("div");
    stub.className = "card skeleton";
    return stub;
  });
  list.replaceChildren(...stubs);
  list.setAttribute("aria-busy", "true");
}

function showCards(items) {
  // замените содержимое list карточками div.card и поставьте aria-busy="false"
}

showSkeleton(3);
console.log(`скелетонов: ${count(".skeleton")}`);

fakeSearch("самбуса").then((items) => {
  showCards(items);
  console.log(`скелетонов: ${count(".skeleton")}, карточек: ${count(".card")}`);
  console.log(list.getAttribute("aria-busy"));
});

скелетонов: 3
скелетонов: 0, карточек: 2
false

<div id="box" class="box"></div>

.box { display: grid; gap: 8px; }
.skeleton { height: 40px; border-radius: 10px; background: linear-gradient(90deg, #e6e9ef 25%, #f4f6fa 37%, #e6e9ef 63%); background-size: 400% 100%; animation: shimmer 1.2s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.dish { padding: 10px 14px; border: 2px solid #ccd3df; border-radius: 10px; background: #fff; font-weight: 700; }
.error { color: #c0392b; font-weight: 700; margin: 0; }
.empty { color: #6b7488; margin: 0; }
#retry { justify-self: start; border: 2px solid #1c2230; background: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-weight: 700; }

const box = document.querySelector("#box");

function render(state) {
  // 1. очистить box и поставить box.dataset.state
  // 2. в зависимости от состояния нарисовать нужное
}

// --- проверка (не удаляйте) ---
const states = [
  { status: "loading", data: [] },
  { status: "error", data: [], error: "Нет сети" },
  { status: "success", data: [] },
  { status: "success", data: ["Курутоб", "Нон", "Шакароб"] },
];
for (const s of states) {
  render(s);
  console.log(box.dataset.state, box.children.length, !!box.querySelector("#retry"));
}

loading 3 false
error 2 true
empty 1 false
success 3 false

04 Debounce: не запускать функцию на каждый чих

Строка поиска «на лету»: пользователь печатает «плов», а результаты меняются уже в процессе. Самое простое решение — слушать событие input и на каждую букву отправлять запрос. Но человек печатает быстро: «п», «пл», «пло», «плов» — это четыре запроса за секунду, из которых нужен только последний. Сервер нагружается, трафик тратится, а ответы приходят вперемешку (об этом — в разделе 5).

Решение называется debounce — «подавление дребезга»: запускаем функцию только тогда, когда пользователь перестал её дёргать на заданное время. Каждый новый вызов сбрасывает ожидание. Пока человек печатает — ничего не происходит; остановился на 300 мс — запрос уходит.

Пишем debounce с нуля

Внутри всего три идеи, которые вы уже знаете: функция возвращает функцию, замыкание хранит таймер между вызовами, а clearTimeout отменяет предыдущее ожидание.

function debounce(fn, wait) {
  let timer;                         // один таймер на все вызовы — живёт в замыкании
  return function (...args) {
    clearTimeout(timer);             // новый вызов: отменяем прошлое ожидание
    timer = setTimeout(() => {
      fn(...args);                   // пауза выдержана — запускаем настоящую функцию
    }, wait);
  };
}

1. Мы получаем функцию fn и паузу wait и возвращаем новую функцию — её и будем вешать на событие.
2. Переменная timer объявлена снаружи возвращаемой функции. Поэтому все вызовы видят одну и ту же переменную (замыкание, урок 5).
3. При каждом вызове сначала clearTimeout(timer) убирает ожидание от прошлого вызова, потом setTimeout заводит новое.
4. Сработает только последнее ожидание — то, которое никто не сбросил за wait миллисекунд.
5. ...args собирает все аргументы в массив, а fn(...args) раскладывает обратно — так debounce подходит к функции с любым числом параметров.

Проверяем на «печатающем» человеке

Чтобы результат не зависел от вашей скорости печати, мы запланируем нажатия по расписанию через setTimeout. Расписание: «п» в 0 мс, «пл» в 40 мс, «пло» в 80 мс (быстро печатает), потом пауза и «плов» в 300 мс. Пауза debounce — 100 мс. В консоли видно, что реально сработало.

function debounce(fn, wait) {
  let timer;
  return function (...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), wait);
  };
}

const search = debounce((q) => console.log(`поиск: ${q}`), 100);

[[0, "п"], [40, "пл"], [80, "пло"], [300, "плов"]].forEach(([at, q]) => {
  setTimeout(() => {
    console.log(`ввод: ${q}`);
    search(q);
  }, at);
});

Разберите вывод. Четыре «нажатия» — но всего два запроса. Первые три нажатия шли с промежутками по 40 мс (меньше 100), поэтому каждое сбрасывало таймер; после третьего прошло 100 мс тишины — и сработал поиск «пло». Потом пауза до 300 мс — и «плов» ушёл отдельным запросом.

Какую паузу выбрать

Отменить отложенный вызов: cancel

Бывает, что нужно не просто отложить, а отменить ждущий вызов: пользователь очистил поле или ушёл со страницы. Функции в JavaScript — тоже объекты, им можно «приклеить» свойство. Добавим метод cancel:

function debounce(fn, wait) {
  let timer;
  function debounced(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), wait);
  }
  debounced.cancel = () => clearTimeout(timer);   // метод у функции
  return debounced;
}

Читать подробнее: learn.javascript.ru: декораторы и переадресация вызова · MDN: clearTimeout

function debounce(fn, wait) {
  return function (arg) {
    let timer;
    clearTimeout(timer);
    timer = setTimeout(() => fn(arg), wait);
  };
}

const search = debounce((q) => console.log(`поиск: ${q}`), 100);

[[0, "п"], [40, "пл"], [80, "пло"]].forEach(([at, q]) => {
  setTimeout(() => {
    console.log(`ввод: ${q}`);
    search(q);
  }, at);
});

ввод: п
ввод: пл
ввод: пло
поиск: пло

// function debounce(fn, wait) { ... }

const search = debounce((q) => console.log(`поиск: ${q}`), 100);

[[0, "п"], [40, "пл"], [80, "пло"], [300, "плов"]].forEach(([at, q]) => {
  setTimeout(() => {
    console.log(`ввод: ${q}`);
    search(q);
  }, at);
});

ввод: п
ввод: пл
ввод: пло
поиск: пло
ввод: плов
поиск: плов

function debounce(fn, wait) {
  let timer;
  return function (arg) {
    clearTimeout(timer);
    timer = setTimeout(() => fn(arg), wait);
  };
}

const search = debounce((q) => console.log(`поиск: ${q}`), 200);

[[0, "п"], [150, "пл"], [300, "пло"]].forEach(([at, q]) => {
  setTimeout(() => {
    console.log(`ввод: ${q}`);
    search(q);
  }, at);
});

ввод: п
поиск: п
ввод: пл
поиск: пл
ввод: пло
поиск: пло

function debounce(fn, wait) {
  let timer;
  return function (arg) {
    clearTimeout(timer);
    timer = setTimeout(() => fn(arg), wait);
  };
}

const find = debounce((query, page) => console.log(`поиск: ${query}, страница ${page}`), 100);

find("п", 1);
setTimeout(() => find("пл", 1), 40);
setTimeout(() => find("плов", 2), 80);

поиск: плов, страница 2

function debounce(fn, wait) {
  let timer;
  function debounced(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), wait);
  }
  // добавьте метод debounced.cancel
  return debounced;
}

const find = debounce((q) => console.log(`поиск: ${q}`), 100);

setTimeout(() => { console.log("вызов: п"); find("п"); }, 0);
setTimeout(() => { console.log("вызов: пл"); find("пл"); }, 40);
setTimeout(() => { console.log("отмена"); find.cancel(); }, 80);
setTimeout(() => { console.log("вызов: плов"); find("плов"); }, 300);

вызов: п
вызов: пл
отмена
вызов: плов
поиск: плов

05 AbortController: отмена запроса

Debounce уменьшает число запросов, но не убирает главную проблему: запрос, который уже ушёл, нельзя «забыть». Он долетит до сервера и вернётся с ответом, даже если пользователю этот ответ уже не нужен. А это приводит к двум неприятностям.

Проблема 1. Лишняя работа

Пользователь открыл страницу каталога и сразу ушёл на другую. Запрос на 100 товаров всё равно скачивается и разбирается — трафик и батарея тратятся впустую (на мобильном интернете в маршрутке это ощутимо).

Проблема 2. Гонка запросов (race condition)

Пользователь набрал «с» — ушёл запрос №1. Через 50 мс дописал «са» — ушёл запрос №2. Сервер обрабатывает запросы по-разному долго: ответ на первый (его результатов много) пришёл через 400 мс, а на второй — через 100 мс. Что получится на экране?

// ↓ «сервер»: медленный поиск по меню — не меняйте
const DISHES = ["Оши палав", "Самбуса с мясом", "Самбуса с тыквой", "Курутоб", "Шакароб", "Нон"];

function fakeSearch(query, { signal, ms = 200 } = {}) {
  return new Promise((resolve, reject) => {
    if (signal && signal.aborted) return reject(signal.reason);
    const timer = setTimeout(() => {
      if (query === "ошибка") return reject(new Error("Нет соединения с сервером"));
      resolve(DISHES.filter((d) => d.toLowerCase().includes(query.toLowerCase())));
    }, ms);
    if (signal) {
      signal.addEventListener("abort", () => {
        clearTimeout(timer);
        reject(signal.reason);
      });
    }
  });
}

let shown = "";

function onType(query, ms) {
  fakeSearch(query, { ms }).then(() => {
    shown = query;                      // «рисуем» ответ
    console.log(`пришёл ответ на «${query}»`);
  });
}

onType("с", 400);                        // старый запрос — медленный
setTimeout(() => onType("са", 100), 50); // новый запрос — быстрый
setTimeout(() => console.log(`на экране: «${shown}»`), 600);

На экране осталось «с» — хотя в поле уже давно написано «са». Ответ на новый запрос пришёл первым, а потом его затёр запоздавший ответ на старый. Пользователь видит результаты не для того, что набрал. Баг плавающий: у вас дома, на быстром интернете, он не проявится, а у клиента в горах — проявится обязательно.

Как это работает: controller и signal

AbortController

«Пульт»: объект, у которого есть кнопка abort(). Создаётся так: new AbortController().

controller.signal

«Провод» от пульта: сигнал, который мы передаём запросу. Запрос слушает его и останавливается, когда нажали кнопку.

controller.abort()

Нажали кнопку — запрос отменён, его промис отклоняется с ошибкой по имени AbortError.

// ↓ «сервер»: медленный поиск по меню — не меняйте
const DISHES = ["Оши палав", "Самбуса с мясом", "Самбуса с тыквой", "Курутоб", "Шакароб", "Нон"];

function fakeSearch(query, { signal, ms = 200 } = {}) {
  return new Promise((resolve, reject) => {
    if (signal && signal.aborted) return reject(signal.reason);
    const timer = setTimeout(() => {
      if (query === "ошибка") return reject(new Error("Нет соединения с сервером"));
      resolve(DISHES.filter((d) => d.toLowerCase().includes(query.toLowerCase())));
    }, ms);
    if (signal) {
      signal.addEventListener("abort", () => {
        clearTimeout(timer);
        reject(signal.reason);
      });
    }
  });
}

const controller = new AbortController();

// запрос на 500 мс, к нему «подключен» пульт
fakeSearch("самбуса", { signal: controller.signal, ms: 500 })
  .then((items) => console.log("получили", items.length))
  .catch((err) => console.log("ошибка:", err.name));

// через 100 мс пользователь нажал «Отмена»
setTimeout(() => {
  console.log("нажали abort()");
  controller.abort();
}, 100);

Запрос, который должен был идти 500 мс, остановился через 100. Ответ не пришёл — вместо него сработал catch с err.name === "AbortError".

Настоящий fetch понимает signal

Наша заглушка устроена так же, как настоящий fetch: сигнал передаётся вторым аргументом, в объекте настроек. Если вызвать abort() сразу, запрос даже не начнёт скачивание:

const controller = new AbortController();

const request = fetch("https://dummyjson.com/products?limit=100", {
  signal: controller.signal,
});

controller.abort();   // отменяем сразу

request.catch((err) => console.log("fetch отменён:", err.name));

Не терпит дольше — таймаут одной строкой

Нередко нужно не отменять вручную, а подождать не дольше N миллисекунд. Для этого есть готовая функция AbortSignal.timeout(мс): она сама нажмёт «abort» через заданное время. Ошибка при этом называется не AbortError, а TimeoutError — так вы отличите «отменили мы» от «не дождались».

fetch("https://dummyjson.com/products?limit=100", { signal: AbortSignal.timeout(1) })
  .then(() => console.log("успели"))
  .catch((err) => console.log("ошибка:", err.name));

Паттерн: «каждый новый запрос отменяет прошлый»

Именно так починить гонку из начала раздела. Храним контроллер в переменной снаружи функции; перед новым запросом отменяем старый и заводим новый контроллер.

// ↓ «сервер»: медленный поиск по меню — не меняйте
const DISHES = ["Оши палав", "Самбуса с мясом", "Самбуса с тыквой", "Курутоб", "Шакароб", "Нон"];

function fakeSearch(query, { signal, ms = 200 } = {}) {
  return new Promise((resolve, reject) => {
    if (signal && signal.aborted) return reject(signal.reason);
    const timer = setTimeout(() => {
      if (query === "ошибка") return reject(new Error("Нет соединения с сервером"));
      resolve(DISHES.filter((d) => d.toLowerCase().includes(query.toLowerCase())));
    }, ms);
    if (signal) {
      signal.addEventListener("abort", () => {
        clearTimeout(timer);
        reject(signal.reason);
      });
    }
  });
}

let shown = "";
let controller = null;                     // контроллер последнего запроса

function onType(query, ms) {
  if (controller) controller.abort();      // 1. отменяем прошлый запрос (если он идёт)
  controller = new AbortController();      // 2. заводим новый «пульт»

  fakeSearch(query, { signal: controller.signal, ms })
    .then(() => {
      shown = query;
      console.log(`пришёл ответ на «${query}»`);
    })
    .catch((err) => {
      if (err.name !== "AbortError") console.log("ошибка:", err.message);   // 3.
    });
}

onType("с", 400);
setTimeout(() => onType("са", 100), 50);
setTimeout(() => console.log(`на экране: «${shown}»`), 600);

1. Один «пульт» на один запрос. Контроллер одноразовый: после abort() он «сломан» навсегда, поэтому на каждый запрос заводим новый.
2. Вызываем abort() на старом перед тем, как создать новый — в этот момент старый запрос ещё может быть в пути.
3. В catch молча пропускаем AbortError. Отмена — это не ошибка сервера, и пугать пользователя красным текстом «Ошибка!» из-за того, что он дописал букву, нельзя.

Читать подробнее: learn.javascript.ru: Fetch: прерывание запроса · MDN: AbortController

// ↓ «сервер»: медленный поиск по меню — не меняйте
const DISHES = ["Оши палав", "Самбуса с мясом", "Самбуса с тыквой", "Курутоб", "Шакароб", "Нон"];

function fakeSearch(query, { signal, ms = 200 } = {}) {
  return new Promise((resolve, reject) => {
    if (signal && signal.aborted) return reject(signal.reason);
    const timer = setTimeout(() => {
      if (query === "ошибка") return reject(new Error("Нет соединения с сервером"));
      resolve(DISHES.filter((d) => d.toLowerCase().includes(query.toLowerCase())));
    }, ms);
    if (signal) {
      signal.addEventListener("abort", () => {
        clearTimeout(timer);
        reject(signal.reason);
      });
    }
  });
}

const controller = new AbortController();

fakeSearch("самбуса", { signal: controller.signal, ms: 500 })
  .then((r) => console.log("получили", r.length))
  .catch((e) => console.log("ошибка:", e.name));

setTimeout(() => {
  console.log("пользователь ушёл");
  // отмените запрос здесь
}, 100);

пользователь ушёл
ошибка: AbortError

// ↓ «сервер»: медленный поиск по меню — не меняйте
const DISHES = ["Оши палав", "Самбуса с мясом", "Самбуса с тыквой", "Курутоб", "Шакароб", "Нон"];

function fakeSearch(query, { signal, ms = 200 } = {}) {
  return new Promise((resolve, reject) => {
    if (signal && signal.aborted) return reject(signal.reason);
    const timer = setTimeout(() => {
      if (query === "ошибка") return reject(new Error("Нет соединения с сервером"));
      resolve(DISHES.filter((d) => d.toLowerCase().includes(query.toLowerCase())));
    }, ms);
    if (signal) {
      signal.addEventListener("abort", () => {
        clearTimeout(timer);
        reject(signal.reason);
      });
    }
  });
}

let shown = "";

function onType(q, ms) {
  fakeSearch(q, { ms }).then(() => {
    shown = q;
    console.log(`пришёл ответ на «${q}»`);
  });
}

onType("с", 400);
setTimeout(() => onType("са", 100), 50);
setTimeout(() => console.log(`на экране: «${shown}»`), 600);

пришёл ответ на «са»
на экране: «са»

// ↓ «сервер»: медленный поиск по меню — не меняйте
const DISHES = ["Оши палав", "Самбуса с мясом", "Самбуса с тыквой", "Курутоб", "Шакароб", "Нон"];

function fakeSearch(query, { signal, ms = 200 } = {}) {
  return new Promise((resolve, reject) => {
    if (signal && signal.aborted) return reject(signal.reason);
    const timer = setTimeout(() => {
      if (query === "ошибка") return reject(new Error("Нет соединения с сервером"));
      resolve(DISHES.filter((d) => d.toLowerCase().includes(query.toLowerCase())));
    }, ms);
    if (signal) {
      signal.addEventListener("abort", () => {
        clearTimeout(timer);
        reject(signal.reason);
      });
    }
  });
}

// async function searchWithTimeout(query, limit, ms) { ... }

async function main() {
  console.log(await searchWithTimeout("самбуса", 500, 200));
  console.log(await searchWithTimeout("курутоб", 100, 400));
}
main();

Найдено: 2
Сервер отвечает слишком долго

// ↓ «сервер»: медленный поиск по меню — не меняйте
const DISHES = ["Оши палав", "Самбуса с мясом", "Самбуса с тыквой", "Курутоб", "Шакароб", "Нон"];

function fakeSearch(query, { signal, ms = 200 } = {}) {
  return new Promise((resolve, reject) => {
    if (signal && signal.aborted) return reject(signal.reason);
    const timer = setTimeout(() => {
      if (query === "ошибка") return reject(new Error("Нет соединения с сервером"));
      resolve(DISHES.filter((d) => d.toLowerCase().includes(query.toLowerCase())));
    }, ms);
    if (signal) {
      signal.addEventListener("abort", () => {
        clearTimeout(timer);
        reject(signal.reason);
      });
    }
  });
}

// function createSearcher() { ... }

const search = createSearcher();

const p1 = search("самбуса");
const p2 = new Promise((resolve) => setTimeout(() => resolve(search("курутоб")), 50));

Promise.all([p1, p2]).then(([a, b]) => {
  console.log("первый:", a === null ? "отменён" : a.join(", "));
  console.log("второй:", b === null ? "отменён" : b.join(", "));
});

первый: отменён
второй: Курутоб

06 Что покажет преподаватель: Cursor

До сих пор ИИ в нашем курсе — это чат: вы пишете вопрос, получаете текст, вы сами копируете код и вставляете в файл. Сегодня преподаватель покажет следующий уровень — ИИ-агента внутри редактора кода. Это демонстрация на экране: ставить Cursor на свои компьютеры не нужно. Главное в этом разделе — не «вау, как быстро», а как этот результат проверять.

Чат и агент — в чём разница

Сценарий демонстрации

Преподаватель берёт мини-приложение из прошлых уроков — поиск по API со списком и пагинацией — разложенное на несколько файлов: index.html, style.css, api.js (запросы), ui.js (рисование) и main.js (события). Задача — ровно та, что мы решаем сегодня руками: добавить состояния загрузки, пустоты и ошибки, debounce и отмену запросов.

1. Сохраняем копию. Перед демо папку проекта копируют (Git мы изучим на уроке 19, пока — обычная копия). Если агент напортачит, всегда можно вернуться.
2. Формулируем задачу по формуле. Промпт зачитывается вслух (он ниже) — каждый его кусок отвечает за свою часть формулы.
3. Смотрим, что агент читает. Агент не «угадывает»: он открывает файлы проекта. Обратите внимание, какие файлы он открыл — пропустил ли нужный.
4. Читаем план — до правок. Просим агента сначала написать план: какие файлы и что изменит. Уже на этом шаге видно, понял ли он задачу.
5. Просматриваем правки файл за файлом. В редакторе видно разницу: что добавлено, что удалено. Принимаем по одному файлу, а не «всё сразу».
6. Запускаем и пробуем сломать. Быстро печатаем в поиске; в DevTools на вкладке Network включаем медленную сеть и режим Offline; ищем запрос, которого нет в API.
7. Находим упущенное. Почти всегда что-то остаётся: забыли сбросить страницу на первую при новом запросе, пропустили AbortError, оставили console.log. Это исправляется следующим промптом или руками.

Промпт для демо

Обратите внимание, как он устроен: сначала контекст, потом задача, потом ограничения, затем что показать и как проверить. Сравните с «плохим» вариантом:

На что смотреть во время демонстрации

Держите эти вопросы в голове, пока смотрите на экран, — и задавайте их вслух:

• Сколько файлов изменено и все ли они нужны? Правка в style.css уместна (skeleton). А вот изменения в чужих функциях, которые мы не просили трогать, — повод остановиться.
• Прочитан ли весь diff? Красное — удалено. Не исчезла ли рабочая логика (например, пагинация) в «рефакторинге»?
• Нет ли выдуманного? Поле JSON, которого нет в реальном ответе API, или функция, которой нет в браузере. Сверяем с настоящим ответом во вкладке Network.
• Обработаны ли все четыре состояния? Особенно путаница «пусто» и «ошибка» — ИИ часто их смешивает.
• Есть ли AbortError в catch? Без него на экране мигает «ошибка» при каждой новой букве.
• Могу ли я объяснить каждую строку? Если нет — код не принимаем (правило курса №3).

Риски: что может пойти не так

А вы — через ИИ-чат: разбираем документацию API

Прямо сейчас вы можете использовать ИИ там, где он особенно полезен: чтобы разобраться с чужой документацией. Формула та же:

// ↓ «сервер»: медленный поиск по меню — не меняйте
const DISHES = ["Оши палав", "Самбуса с мясом", "Самбуса с тыквой", "Курутоб", "Шакароб", "Нон"];

function fakeSearch(query, { signal, ms = 200 } = {}) {
  return new Promise((resolve, reject) => {
    if (signal && signal.aborted) return reject(signal.reason);
    const timer = setTimeout(() => {
      if (query === "ошибка") return reject(new Error("Нет соединения с сервером"));
      resolve(DISHES.filter((d) => d.toLowerCase().includes(query.toLowerCase())));
    }, ms);
    if (signal) {
      signal.addEventListener("abort", () => {
        clearTimeout(timer);
        reject(signal.reason);
      });
    }
  });
}

let state = { status: "idle", data: [], error: null };
let timer = null;
let controller = null;

function setState(patch) {
  state = { ...state, ...patch };
  console.log(`состояние: ${state.status}`);
}

async function runSearch(query) {
  controller = new AbortController();
  setState({ status: "loading" });
  try {
    const items = await fakeSearch(query, { signal: controller.signal });
    setState({ status: "success", data: items });
  } catch (e) {
    setState({ status: "error", error: e.message });
  }
}

function onInput(query) {
  timer = setTimeout(() => runSearch(query), 50);
}

[[0, "к"], [20, "ку"], [40, "кур"], [150, "самбуса"], [550, "борщ"]].forEach(([at, q]) =>
  setTimeout(() => onInput(q), at)
);

состояние: loading
состояние: loading
состояние: success
состояние: loading
состояние: empty

07 Практика на уроке: три состояния и debounce

Собираем всё вместе в мини-приложении «Меню чайханы»: строка поиска и список блюд. Вместо настоящего API здесь знакомая заглушка fakeSearch, чтобы всё работало одинаково у всех и без интернета. Вы делаете в два этапа: сначала состояния, потом debounce и отмена.

1. Этап 1. Состояния. Один объект state и функция render, которая по state.status рисует: подсказку, skeleton, карточки, «пусто» или ошибку с кнопкой «Повторить». Функция load переводит статус: loading → success / empty / error.
2. Этап 2. Debounce. Пишем debounce, вешаем на input: запрос уходит только после паузы.
3. Этап 3. Отмена. Перед новым запросом отменяем старый, AbortError молча пропускаем.
4. Этап 4. В своём приложении. То же самое переносим в проект из уроков 14–15 — ниже есть план.

<h3 class="title">Меню чайханы</h3>
<input id="q" class="search" placeholder="Что ищем?" autocomplete="off">
<div id="result" class="result"></div>

.title { margin: 0 0 10px; font-size: 20px; }
.search { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 2px solid #ccd3df; border-radius: 10px; font-size: 16px; margin-bottom: 12px; }
.result { display: grid; gap: 8px; }
.skeleton { height: 42px; border-radius: 10px; background: linear-gradient(90deg, #e6e9ef 25%, #f4f6fa 37%, #e6e9ef 63%); background-size: 400% 100%; animation: shimmer 1.2s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.dish { padding: 10px 14px; border: 2px solid #ccd3df; border-radius: 10px; background: #fff; font-weight: 700; }
.hint, .empty { color: #6b7488; margin: 0; }
.error { color: #c0392b; font-weight: 700; margin: 0; }
.retry { justify-self: start; border: 2px solid #1c2230; background: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-weight: 700; }

// ↓ «сервер»: медленный поиск по меню — не меняйте
const DISHES = ["Оши палав", "Самбуса с мясом", "Самбуса с тыквой", "Курутоб", "Шакароб", "Нон"];

function fakeSearch(query, { signal, ms = 200 } = {}) {
  return new Promise((resolve, reject) => {
    if (signal && signal.aborted) return reject(signal.reason);
    const timer = setTimeout(() => {
      if (query === "ошибка") return reject(new Error("Нет соединения с сервером"));
      resolve(DISHES.filter((d) => d.toLowerCase().includes(query.toLowerCase())));
    }, ms);
    if (signal) {
      signal.addEventListener("abort", () => {
        clearTimeout(timer);
        reject(signal.reason);
      });
    }
  });
}

const result = document.querySelector("#result");
let state = { status: "idle", items: [], error: null };

function render() {
  result.dataset.state = state.status;
  result.replaceChildren();
  // TODO 1: нарисуйте result в зависимости от state.status
}

async function load(query) {
  // TODO 2: loading -> запрос -> success / empty / error
  // после каждой смены state вызывайте render()
}

render();

// --- проверка (не удаляйте) ---
async function check() {
  const request = load("самбуса");
  console.log(result.dataset.state, result.children.length);
  await request;
  console.log(result.dataset.state, result.children.length);
  await load("борщ");
  console.log(result.dataset.state, result.textContent.trim());
  await load("ошибка");
  console.log(result.dataset.state, !!result.querySelector(".retry"));
}
check();

loading 3
success 2
empty Ничего не найдено
error true

<h3 class="title">Меню чайханы</h3>
<input id="q" class="search" placeholder="Что ищем?" autocomplete="off">
<div id="result" class="result"></div>

.title { margin: 0 0 10px; font-size: 20px; }
.search { width: 100%; box-sizing: border-box; padding: 10px 12px; border: 2px solid #ccd3df; border-radius: 10px; font-size: 16px; margin-bottom: 12px; }
.result { display: grid; gap: 8px; }
.skeleton { height: 42px; border-radius: 10px; background: linear-gradient(90deg, #e6e9ef 25%, #f4f6fa 37%, #e6e9ef 63%); background-size: 400% 100%; animation: shimmer 1.2s ease infinite; }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
.dish { padding: 10px 14px; border: 2px solid #ccd3df; border-radius: 10px; background: #fff; font-weight: 700; }
.hint, .empty { color: #6b7488; margin: 0; }
.error { color: #c0392b; font-weight: 700; margin: 0; }
.retry { justify-self: start; border: 2px solid #1c2230; background: #fff; border-radius: 8px; padding: 6px 12px; cursor: pointer; font-weight: 700; }

const DISHES = ["Оши палав", "Самбуса с мясом", "Самбуса с тыквой", "Курутоб", "Шакароб", "Нон"];

let requests = 0;                          // сколько запросов реально ушло
function fakeSearch(query, { signal, ms = 300 } = {}) {
  requests++;
  return new Promise((resolve, reject) => {
    if (signal && signal.aborted) return reject(signal.reason);
    const timer = setTimeout(() => {
      if (query === "ошибка") return reject(new Error("Нет соединения с сервером"));
      resolve(DISHES.filter((d) => d.toLowerCase().includes(query.toLowerCase())));
    }, ms);
    if (signal) {
      signal.addEventListener("abort", () => {
        clearTimeout(timer);
        reject(signal.reason);
      });
    }
  });
}

const input = document.querySelector("#q");
const result = document.querySelector("#result");
let state = { status: "idle", items: [], error: null };
let controller = null;
let successRenders = 0;                    // сколько раз рисовали успех

function render() {
  result.dataset.state = state.status;
  result.replaceChildren();
  if (state.status === "idle") {
    const p = document.createElement("p");
    p.className = "hint";
    p.textContent = "Начните вводить название блюда";
    result.append(p);
  } else if (state.status === "loading") {
    for (let i = 0; i < 3; i++) {
      const stub = document.createElement("div");
      stub.className = "skeleton";
      result.append(stub);
    }
  } else if (state.status === "success") {
    successRenders++;
    result.append(...state.items.map((name) => {
      const dish = document.createElement("div");
      dish.className = "dish";
      dish.textContent = name;
      return dish;
    }));
  } else if (state.status === "empty") {
    const p = document.createElement("p");
    p.className = "empty";
    p.textContent = "Ничего не найдено";
    result.append(p);
  } else {
    const p = document.createElement("p");
    p.className = "error";
    p.textContent = state.error;
    const retry = document.createElement("button");
    retry.className = "retry";
    retry.textContent = "Повторить";
    result.append(p, retry);
  }
}

// TODO 1: function debounce(fn, wait) { ... }

async function load(query) {
  // TODO 2: если controller уже есть — отмените его; затем создайте новый
  state = { status: "loading", items: [], error: null };
  render();
  try {
    const items = await fakeSearch(query, { signal: controller.signal });
    state = { status: items.length === 0 ? "empty" : "success", items, error: null };
  } catch (err) {
    // TODO 3: если err.name === "AbortError" — просто выйти из функции
    state = { status: "error", items: [], error: err.message };
  }
  render();
}

// TODO 4: input.addEventListener("input", ...) с debounce 100 мс

render();

// --- проверка (не удаляйте) ---
function type(text) {
  input.value = text;
  input.dispatchEvent(new Event("input"));
}
type("с");
setTimeout(() => type("са"), 30);
setTimeout(() => type("сам"), 60);
setTimeout(() => console.log("запросов:", requests), 500);
setTimeout(() => type("кур"), 550);
setTimeout(() => type("курутоб"), 720);
setTimeout(() => {
  console.log("запросов:", requests);
  console.log("успешных отрисовок:", successRenders);
  console.log(result.dataset.state, result.children.length);
}, 1250);

запросов: 1
запросов: 3
успешных отрисовок: 2
success 1

Этап 4. Переносим в своё приложение

Ваше приложение из уроков 14–15 уже умеет искать и листать страницы. Добавляем в него то же самое, шаг за шагом. После каждого шага запускайте и пробуйте:

1. Заведите state с полями status, items, error (и page, если у вас есть пагинация).
2. Вынесите рисование в одну функцию render(), которая по state.status показывает нужную картинку. Больше нигде DOM не трогайте.
3. Оберните запрос: сначала loading, потом success / empty / error. Не забудьте if (!res.ok) throw ....
4. Skeleton: скопируйте CSS из раздела 3, добавьте нужное число заглушек в состоянии loading.
5. Debounce: скопируйте debounce, оберните обработчик input — пауза 300–400 мс.
6. AbortController: передайте signal в свой fetch, отменяйте прошлый запрос, пропускайте AbortError.
7. Проверьте в DevTools (вкладка Network): включите медленную сеть (Slow 4G) и режим Offline — все три состояния должны увидеться вживую.

let state = { status: "idle", items: [], error: null };
let controller = null;

async function load(query) {
  if (controller) controller.abort();
  controller = new AbortController();
  state = { status: "loading", items: [], error: null };
  console.log("состояние:", state.status);          // здесь будет render()
  try {
    const url = `https://dummyjson.com/products/search?q=${encodeURIComponent(query)}&limit=5`;
    const res = await fetch(url, { signal: controller.signal });
    if (!res.ok) throw new Error(`Сервер ответил кодом ${res.status}`);
    const data = await res.json();
    state = { status: data.products.length ? "success" : "empty", items: data.products, error: null };
  } catch (err) {
    if (err.name === "AbortError") return;           // отмена — не ошибка
    state = { status: "error", items: [], error: err.message };
  }
  console.log("состояние:", state.status, "| найдено:", state.items.length);
}

load("phone");

08 Домашнее задание

Довести UX приложения: загрузка, пустой результат, ошибка сети. Берёте своё приложение из уроков 14–15 (список или поиск по настоящему API) и делаете его вежливым к пользователю.

Что нужно сделать

1. Загрузка. Пока идёт запрос, показывается skeleton (3–6 заглушек нужной формы). На контейнере — aria-busy.
2. Пусто. Если ничего не нашлось — понятный текст («Ничего не найдено по запросу «…»») и подсказка, что делать.
3. Ошибка. Проверка res.ok; понятное сообщение по-человечески (не «Failed to fetch») и кнопка «Повторить», которая повторяет тот же запрос.
4. Debounce. Поиск «на лету» с debounce 300–500 мс, написанный вами (не из библиотеки).
5. Отмена. Новый запрос отменяет предыдущий через AbortController; AbortError не показывается как ошибка.
6. Проверка в DevTools. Сделайте три скриншота: загрузка при медленной сети, режим Offline с ошибкой, пустой результат.
7. (Бонус.) При новом запросе страница сбрасывается на первую; кнопки пагинации отключены на время загрузки.

Что сдавать

• Ссылку на репозиторий в GitHub (или папку проекта — как договоритесь с преподавателем).
• Три скриншота состояний (загрузка, ошибка, пусто).
• Короткое описание на 3–5 предложений: что было сложнее всего и где использовали ИИ. Если использовали — каждую строку нужно уметь объяснить.

Как оцениваем (0–10)