Ҳолатҳои боркунӣ, хато, 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-ро санҷед — вай барои рамзҳои 200–299 ба true баробар аст. Агар не — хаторо худатон бипартоед:

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-ро аз сифр менависем

Дар дохил ҳамагӣ се ғояи аллакай маълум ҳаст: функсия функсия бармегардонад, closure таймерро байни даъватҳо нигоҳ медорад, clearTimeout бошад интизории қаблиро бекор мекунад.

function debounce(fn, wait) {
  let timer;                         // як таймер барои ҳамаи даъватҳо — дар closure зиндагӣ мекунад
  return function (...args) {
    clearTimeout(timer);             // даъвати нав: интизории гузаштаро бекор мекунем
    timer = setTimeout(() => {
      fn(...args);                   // танаффус дида шуд — функсияи воқеиро иҷро мекунем
    }, wait);
  };
}

1. Мо функсияи fn ва танаффуси wait-ро мегирем ва функсияи нав бармегардонем — онро ба ҳодиса мепайвандем.
2. Тағйирёбандаи timer дар берун аз функсияи баргардонидашаванда эълон шудааст. Барои ҳамин ҳамаи даъватҳо як тағйирёбандаи ягонаро мебинанд (closure, дарси 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)