Chapter 44 — Debouncing & Throttling

Chapter 30.4'da debounce'ga qisqacha kirish qilgan edik. Bu bobda debounce va uning "aka-ukasi" throttle'ni chuqur, umumiy (universal) function shaklida o'rganamiz.

---

44.1 Muammo — Haddan tashqari tez-tez chaqiriladigan function'lar

Simple Explanation

Ba'zi hodisalar (Chapter 33) — masalan, scroll, resize, input — juda tez-tez, ba'zan soniyasiga o'nlab marta ishga tushadi. Agar bu hodisaga bog'langan function "og'ir" (masalan, server so'rovi yuboradigan) bo'lsa, bu dasturni sekinlashtirishi yoki hatto serverga haddan tashqari ko'p so'rov yuborishi mumkin.

Real-Life Analogy

🚪 Debounce — bu lift eshigi: eshik yopilishidan oldin, agar kimdir yana tugmani bossa, taymer qaytadan boshlanadi — eshik faqat odamlar "tinchigandan" keyin yopiladi.
🚰 Throttle — bu suv kranidan chiqadigan tomchilar: qancha zo'r bersangiz ham, suv faqat belgilangan tezlikda (masalan, har soniyada bir marta) chiqadi, ko'proq emas.

44.2 Debounce — Chuqur va Umumiy Yechim

Simple Explanation

Debounce — function faqat, oxirgi chaqiruvdan keyin belgilangan vaqt o'tib, hech qanday yangi chaqiruv bo'lmasagina ishga tushadi.

Umumiy (Universal) Debounce Function

script.js
JavaScriptNusxalash
01function debounce(func, delay) {
02    let timeoutId;
03 
04    return function (...args) {
05        clearTimeout(timeoutId);
06 
07        timeoutId = setTimeout(() => {
08            func.apply(this, args);
09        }, delay);
10    };
11}

How It Works — bosqichma-bosqich

1. debounce(func, delay) — Chapter 14'da o'rgangan Higher-Order Function: u function qabul qilib, yangi, "debounce qilingan" function qaytaradi.
2. Qaytarilgan function har chaqirilganda, avvalgi timer (clearTimeout) bekor qilinadi.
3. Yangi timer boshlanadi. Agar delay vaqt ichida yana chaqiruv bo'lmasa, asl func ishga tushadi.
4. func.apply(this, args) — Chapter 13'da o'rgangan apply() orqali, asl this kontekstini va barcha argumentlarni (Chapter 6'dagi rest parameters — ...args) to'g'ri uzatadi.

Amaliy misol — Qidiruv maydoni

script.js
JavaScriptNusxalash
01function searchAPI(query) {
02    console.log("Qidirilmoqda: " + query);
03    // haqiqiy loyihada bu yerda fetch() chaqirilardi (Chapter 37)
04}
05 
06let debouncedSearch = debounce(searchAPI, 500);
07 
08let input = document.getElementById("searchInput");
09 
10input.addEventListener("input", function (event) {
11    debouncedSearch(event.target.value);
12});

Explanation

Foydalanuvchi qanchalik tez yozmasin, searchAPI faqat foydalanuvchi yozishni to'xtatgandan 500ms keyin, faqat bir marta chaqiriladi — bu keraksiz ko'p server so'rovlarining oldini oladi.

44.3 ⚠️ Qiyin mavzu: Throttle — Debounce'dan farqi

Simple Explanation

Throttle — function'ning belgilangan vaqt oralig'ida faqat bir marta ishga tushishini kafolatlaydi, hodisa qanchalik tez-tez chaqirilishidan qat'i nazar. Debounce'dan farqli, throttle — chaqiruvlarni "kutmaydi", balki ularni muntazam oraliqlarga taqsimlaydi.

Jadval — Debounce vs Throttle

Diagram — Solishtirish

code.text
TEXTNusxalash
01Foydalanuvchi harakati:  |--|-|--|---|-|--|--------|
02                          (juda tez-tez chaqiriladi)
03 
04Debounce natijasi:                                 |  ← faqat OXIRIDA, bir marta
05                          (harakat to'xtaganda)
06 
07Throttle natijasi:       |     |     |     |        ← muntazam oraliqlarda
08                          (harakat davom etsa ham)

Umumiy Throttle Function

script.js
JavaScriptNusxalash
01function throttle(func, limit) {
02    let inThrottle = false;
03 
04    return function (...args) {
05        if (!inThrottle) {
06            func.apply(this, args);
07            inThrottle = true;
08 
09            setTimeout(() => {
10                inThrottle = false;
11            }, limit);
12        }
13    };
14}

How It Works — bosqichma-bosqich

1. inThrottle — closure (Chapter 12) orqali "eslab qolinadigan" holat, function hozir "sovutish davrida"mi yoki yo'qmi, buni bildiradi.
2. Agar inThrottle — false bo'lsa (ya'ni "sovutish davri" tugagan), func darhol ishga tushadi, va inThrottle — truega o'rnatiladi.
3. limit millisekunddan keyin, inThrottle qayta falsega qaytariladi — endi keyingi chaqiruv ishlashi mumkin.
4. Bu vaqt oralig'ida kelgan barcha boshqa chaqiruvlar — jimgina e'tiborsiz qoldiriladi.

Amaliy misol — Scroll hodisasi

script.js
JavaScriptNusxalash
01function logScrollPosition() {
02    console.log("Scroll pozitsiyasi: " + window.scrollY);
03}
04 
05let throttledScroll = throttle(logScrollPosition, 1000);
06 
07window.addEventListener("scroll", throttledScroll);

Explanation

Foydalanuvchi qanchalik tez scroll qilmasin, logScrollPosition — soniyasiga faqat bir marta ishga tushadi, bu esa unumdorlikni saqlaydi.

🔥 Important
Qoida sifatida: agar sizga faqat "harakat tugagandan keyingi yakuniy natija" kerak bo'lsa (masalan, qidiruv so'rovi) — debounce. Agar sizga harakat davomida muntazam, lekin kamdan-kam yangilanishlar kerak bo'lsa (masalan, scroll pozitsiyasini kuzatish) — throttle.

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
Chapter 44.2'dagi debounce functionidan foydalanib, oynani o'lchamini o'zgartirish (resize) hodisasida, foydalanuvchi o'lchamni o'zgartirishni to'xtatgandan 300ms keyin, oynaning yangi innerWidthini konsolga chiqaring.
Required Concepts:

• debounce
• resize event
  Hint:
  window.addEventListener("resize", debounce(() => console.log(window.innerWidth), 300));

🟡 Exercise 2 — Medium

Task:
Chapter 44.3'dagi throttle functionidan foydalanib, sichqoncha harakati (mousemove) hodisasida, har 500msda sichqonchaning clientX, clientY koordinatalarini konsolga chiqaring.
Required Concepts:

• throttle
• mousemove event
  Hint:
  document.addEventListener("mousemove", throttle((e) => console.log(e.clientX, e.clientY), 500));

🔴 Exercise 3 — Hard

Task:
debounce va throttle functionlarini birlashtirib, oddiy "tugma bosish hisoblagichi" yasang: bitta tugmaga ikkita alohida click listener qo'shing — biri debounce (500ms) bilan, ikkinchisi throttle (500ms) bilan o'ralgan bo'lsin. Tugmani tez-tez (5-6 marta ketma-ket) bosib, ikkalasining nechta marta ishga tushganini solishtiring.
Required Concepts:

• debounce vs throttle amaliy farqi
  Hint:
  Har ikkala holatda ham alohida hisoblagich variable ishlatib, konsolga chiqaring.

🔮 Predict the Output

script.js
JavaScriptNusxalash
01function debounce(func, delay) {
02    let timeoutId;
03    return function (...args) {
04        clearTimeout(timeoutId);
05        timeoutId = setTimeout(() => func.apply(this, args), delay);
06    };
07}
08 
09let log = debounce(() => console.log("Ishladi"), 1000);
10 
11log();
12log();
13log();

Agar bu uchta chaqiruv bir zumda (masalan, 10ms ichida) ketma-ket bajarilsa, nechta marta "Ishladi" chiqadi?

🧠 Think first! Javobni ko'rishdan oldin kamida 30 soniya o'ylang.

<details> <summary>Answer</summary> Faqat bitta marta, "Ishladi".

Why?
Har bir log() chaqiruvi — avvalgi timerni clearTimeout() orqali bekor qiladi va yangisini boshlaydi. Uchala chaqiruv ham bir zumda (10ms ichida) bo'lgani uchun, faqat oxirgi timer "omon qoladi" va 1000ms dan keyin ishga tushadi.

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor:

script.js
JavaScriptNusxalash
01function throttle(func, limit) {
02    let inThrottle;
03    return function () {
04        if (!inThrottle) {
05            func();
06            inThrottle = true;
07        }
08        // setTimeout orqali inThrottle'ni qayta false qilish YO'Q
09    };
10}
11 
12let logPosition = throttle(() => console.log("Scroll"), 1000);
13window.addEventListener("scroll", logPosition);

Your Task:

• Nima uchun "Scroll" faqat bir marta, butun sahifa umrida chiqishini tushuntiring.
• Kodni tuzating.

<details> <summary>Solution</summary> Muammo: inThrottle — true qilib o'rnatilgach, uni qaytadan falsega o'tkazadigan hech qanday mexanizm yo'q. Shuning uchun birinchi chaqiruvdan keyin, inThrottle abadiy true bo'lib qoladi, va func() boshqa hech qachon ishga tushmaydi.

Yechim:

script.js
JavaScriptNusxalash
01function throttle(func, limit) {
02    let inThrottle;
03    return function (...args) {
04        if (!inThrottle) {
05            func.apply(this, args);
06            inThrottle = true;
07            setTimeout(() => {
08                inThrottle = false; // MUHIM: qayta false qilish
09            }, limit);
10        }
11    };
12}

</details>

📌 Chapter Summary

• Debounce — function faqat, chaqiruvlar to'xtagandan keyin, bir marta ishga tushadi.
• Throttle — function muntazam oraliqlarda, chaqiruvlar davom etsa ham, ishga tushib turadi.
• Debounce — qidiruv, forma validatsiyasi kabi "yakuniy natija" kerak bo'lgan holatlar uchun.
• Throttle — scroll, resize, mousemove kabi "muntazam kuzatish" kerak bo'lgan holatlar uchun.
• Ikkalasi ham — Closure (Chapter 12) va Higher-Order Function (Chapter 14) tamoyillariga asoslanadi.

🎯 Key Takeaways

• Debounce va Throttle — ikkalasi ham unumdorlikni oshirish uchun ishlatiladigan, lekin butunlay boshqacha maqsadga xizmat qiluvchi texnikalar.
• To'g'ri texnikani tanlash — "menga yakuniy natija kerakmi (debounce) yoki muntazam yangilanish kerakmi (throttle)?" degan savolga bog'liq.
• Ikkalasi ham clearTimeout/setTimeout va closure orqali "holat"ni saqlab turadi.
• func.apply(this, args) — asl this va argumentlarni to'g'ri uzatish uchun muhim.
• Bu texnikalar — Chapter 30 (Timers), 12 (Closures), 13 (this), 14 (HOF) bilimlarini birlashtirgan amaliy qo'llanilish.

⚡ Quick Cheat Sheet

script.js
JavaScriptNusxalash
01function debounce(func, delay) {
02    let timeoutId;
03    return function (...args) {
04        clearTimeout(timeoutId);
05        timeoutId = setTimeout(() => func.apply(this, args), delay);
06    };
07}
08 
09function throttle(func, limit) {
10    let inThrottle;
11    return function (...args) {
12        if (!inThrottle) {
13            func.apply(this, args);
14            inThrottle = true;
15            setTimeout(() => inThrottle = false, limit);
16        }
17    };
18}

---