Chapter 30 — setTimeout / setInterval

Bu bob bilan PART 4 (Asynchronous JavaScript) yakunlanadi. Chapter 26-29'da setTimeoutni ko'p marta misol sifatida ishlatgan edik — endi uni, va uning "aka-ukasi" setIntervalni to'liq va tizimli o'rganamiz.

---

30.1 setTimeout — Kechiktirilgan bajarish

Simple Explanation

setTimeout(function, delay) — berilgan delay (millisekundlarda) vaqtdan keyin, functionni bir marta ishga tushiradi.

Example

script.js
JavaScriptNusxalash
01console.log("Boshlanishi");
02 
03setTimeout(function () {
04    console.log("3 soniyadan keyin ishga tushdi");
05}, 3000);
06 
07console.log("Bu darhol chiqadi");

setTimeout'ni bekor qilish — clearTimeout

script.js
JavaScriptNusxalash
01let timerId = setTimeout(function () {
02    console.log("Bu hech qachon chiqmaydi");
03}, 5000);
04 
05clearTimeout(timerId);

Explanation

setTimeout — chaqirilganda bir noyob ID (timerId) qaytaradi. clearTimeout(timerId) — hali ishga tushmagan timerni bekor qiladi.

💡 Key Idea
clearTimeout — foydalanuvchi interfeysida juda foydali, masalan: "Agar foydalanuvchi 5 soniya ichida tugmani bossa, ogohlantirish ko'rsatilmasin" kabi holatlarda.

30.2 setInterval — Takrorlanuvchi bajarish

Simple Explanation

setInterval(function, interval) — berilgan interval millisekund oralig'ida, functionni cheksiz takrorlab ishga tushiradi (to'xtatilmaguncha).

Example

script.js
JavaScriptNusxalash
01let count = 0;
02 
03let intervalId = setInterval(function () {
04    count++;
05    console.log("Soniya: " + count);
06 
07    if (count === 5) {
08        clearInterval(intervalId);
09        console.log("To'xtatildi");
10    }
11}, 1000);

Explanation

Har 1 soniyada count oshadi va chiqariladi. count === 5 bo'lganda, clearInterval(intervalId) chaqirilib, takrorlanish to'xtatiladi.

⚠️ Common Mistake
setIntervalni to'xtatishni unutish — bu dasturda "xotira sizib chiqishi" (memory leak) va keraksiz fon jarayonlarining davom etishiga olib keladi. Har doim setInterval ishlatilganda, uni qachon va qanday to'xtatish haqida o'ylab qo'yish kerak.

30.3 ⚠️ Qiyin mavzu: setTimeout yordamida setInterval'ni "qayta yaratish"

Simple Explanation

Ko'p tajribali dasturchilar, ba'zi hollarda setInterval o'rniga ketma-ket setTimeout ishlatishni tavsiya qiladi. Buning sababini tushunish uchun ularning farqini chuqur ko'rish kerak.

Muammo — setInterval'ning yashirin xavfi

setInterval — har doim, avvalgi chaqiruv tugaganmi yoki yo'qmi, buni tekshirmasdan, belgilangan vaqt oralig'ida yangi chaqiruvni "navbatga qo'yishga" harakat qiladi. Agar function bajarilishi belgilangan interval'dan uzoqroq vaqt olsa, chaqiruvlar "to'planib" qolishi yoki ustma-ust tushishi mumkin.

Real-Life Analogy

⏰ setIntervalni har 1 soniyada avtomatik yuboriladigan pochta jo'natmasiga o'xshating: agar oldingi jo'natma hali yetib bormagan bo'lsa ham, tizim baribir yangisini jo'nataveradi — bu "tirbandlik" yaratishi mumkin.
⏳ Ketma-ket setTimeout esa — "oldingi jo'natma yetib borgandan keyingina, keyingisini jo'natish" tamoyili bilan ishlaydi, bu ancha nazoratliroq.

Yechim — recursive setTimeout

script.js
JavaScriptNusxalash
01function repeatTask() {
02    console.log("Vazifa bajarildi: " + new Date().toLocaleTimeString());
03 
04    setTimeout(repeatTask, 1000); // faqat oldingi vazifa TUGAGACH, keyingisi rejalashtiriladi
05}
06 
07setTimeout(repeatTask, 1000);

Diagram — solishtirish

code.text
TEXTNusxalash
01setInterval (xavfli bo'lishi mumkin):
02[vazifa1: 1200ms] [vazifa2 kutmoqda...] → tirbandlik
03    │
04    ▼ interval = 1000ms, lekin vazifa 1200ms davom etadi
05 
06Recursive setTimeout (xavfsizroq):
07[vazifa1: 1200ms] → tugagach → [1000ms kutish] → [vazifa2]

🔥 Important
Oddiy, qisqa vaqtli vazifalar uchun setInterval odatda yetarli va muammosiz. Lekin agar vazifa serverdan ma'lumot olish yoki boshqa noaniq davomiylikdagi amal bo'lsa, recursive setTimeout — xavfsizroq va tavsiya etiladigan yondashuv.

30.4 Amaliy misol — Debounce (kirish)

Simple Explanation

Debounce — foydalanuvchi tez-tez amal bajarganda (masalan, klaviaturada yozayotganda), functionni har safar emas, balki foydalanuvchi "to'xtagandan keyingina" bir marta ishga tushirish texnikasi. Bu — Chapter 44'da chuqur o'rganiladi, lekin setTimeout asosida qanday ishlashini shu yerda ko'rib chiqamiz.

Oddiy misol

script.js
JavaScriptNusxalash
01let timeoutId;
02 
03function handleSearchInput(query) {
04    clearTimeout(timeoutId);
05 
06    timeoutId = setTimeout(function () {
07        console.log("Qidirilmoqda: " + query);
08    }, 500);
09}
10 
11// Foydalanuvchi tez-tez yozsa:
12handleSearchInput("J");
13handleSearchInput("Ja");
14handleSearchInput("Jav");
15// Faqat oxirgi chaqiruvdan 500ms o'tgach, "Qidirilmoqda: Jav" chiqadi

Explanation

Har safar handleSearchInput chaqirilganda, avvalgi timer clearTimeout orqali bekor qilinadi, va yangi timer boshlanadi. Natijada, faqat foydalanuvchi yozishni to'xtatgandan keyin, oxirgi qiymat bilan qidiruv amalga oshadi.

🔗 Connection
Bu — clearTimeout + setTimeoutning eng amaliy va keng tarqalgan qo'llanilishlaridan biri, veb-dasturlashda juda ko'p ishlatiladi (qidiruv maydonlari, oyna o'lchamini o'zgartirish hodisalari va h.k.).

📝 Practice Exercises

🟢 Exercise 1 — Easy

Task:
setTimeout yordamida 2 soniyadan keyin "Salom!" chiqaradigan kod yozing.
Required Concepts:

• setTimeout
  Hint:
  setTimeout(() => console.log("Salom!"), 2000);

🟡 Exercise 2 — Medium

Task:
setInterval yordamida har 1 soniyada 1 dan boshlab sonlarni chiqaring, 5ga yetganda avtomatik to'xtating (clearInterval bilan).
Required Concepts:

• setInterval, clearInterval
  Hint:
  Chapter 30.2'dagi misolga o'xshab yozing.

🔴 Exercise 3 — Hard

Task:
Oddiy debounce(func, delay) nomli Higher-Order Function yozing — u istalgan functionni qabul qilib, uning "debounce qilingan" versiyasini qaytarsin (Chapter 30.4'dagi mantiqni umumiy function shakliga keltiring).
Required Concepts:

• Higher-Order Functions (Chapter 14)
• Closures (Chapter 12)
• setTimeout, clearTimeout
  Hint:

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

🔮 Predict the Output

script.js
JavaScriptNusxalash
01for (let i = 1; i <= 3; i++) {
02    setTimeout(() => console.log(i), i * 1000);
03}
04 
05console.log("Boshlandi");

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

<details> <summary>Answer</summary> Boshlandi 1 (1 soniyadan keyin) 2 (2 soniyadan keyin) 3 (3 soniyadan keyin)

Why?
"Boshlandi" — sinxron kod, darhol chiqadi. Har bir setTimeout — turli kechikish vaqti bilan (1000, 2000, 3000ms) rejalashtirilgan, shuning uchun ular navbat bilan, belgilangan vaqtlarda chiqadi. let (Chapter 11) tufayli, har bir i o'zining alohida qiymatini to'g'ri "eslab qoladi".

</details>

🐛 Debugging Challenge

Quyidagi kodda muammo bor — dasturchi "Yuklanmoqda..." xabarini 3 soniyaga ko'rsatib, keyin uni yashirmoqchi, lekin komponent 3 soniyadan oldin "yo'q qilinsa" (masalan, foydalanuvchi sahifani tark etsa), xatolik yuz beradi:

script.js
JavaScriptNusxalash
01function showLoading() {
02    console.log("Yuklanmoqda...");
03 
04    setTimeout(function () {
05        console.log("Yuklandi!");
06    }, 3000);
07}
08 
09showLoading();
10// Foydalanuvchi 1 soniyadan keyin sahifani tark etadi,
11// lekin "Yuklandi!" baribir chiqadi — bu kerak emas edi

Your Task:

• Muammoni aniqlang.
• clearTimeoutdan foydalanib, timerni "bekor qilish" imkoniyatini qo'shing.

<details> <summary>Solution</summary> Muammo: setTimeoutning ID'si hech qayerda saqlanmagan, shuning uchun uni keyinchalik bekor qilib bo'lmaydi.

Yechim:

script.js
JavaScriptNusxalash
01function showLoading() {
02    console.log("Yuklanmoqda...");
03 
04    let timerId = setTimeout(function () {
05        console.log("Yuklandi!");
06    }, 3000);
07 
08    return timerId; // tashqariga qaytarilyapti, kerak bo'lsa bekor qilish uchun
09}
10 
11let timer = showLoading();
12 
13// Agar foydalanuvchi sahifani tark etsa:
14clearTimeout(timer); // "Yuklandi!" endi hech qachon chiqmaydi

</details>

📌 Chapter Summary

• setTimeout — functionni bir marta, belgilangan vaqtdan keyin ishga tushiradi.
• setInterval — functionni takrorlab, belgilangan interval bilan ishga tushiradi.
• clearTimeout/clearInterval — timerlarni bekor qilish uchun, timer ID orqali.
• Recursive setTimeout — ba'zida setIntervaldan xavfsizroq alternativ (vazifa davomiyligi noaniq bo'lganda).
• Debounce naqshi — setTimeout + clearTimeout orqali amalga oshiriladi.

🎯 Key Takeaways

• Har bir setInterval — albatta biror joyda clearInterval bilan to'xtatilishi kerak, aks holda "abadiy" ishlayveradi.
• Vazifa davomiyligi noaniq bo'lsa, recursive setTimeout — setIntervaldan xavfsizroq.
• Timer ID'larni saqlab qo'yish — ularni keyinchalik bekor qilish imkonini beradi.
• Debounce — foydalanuvchi tez-tez amal bajarganda, keraksiz ko'p chaqiruvlarning oldini oladi.
• Bu bob — Chapter 29'da o'rgangan Event Loop mexanizmining eng ko'p ishlatiladigan amaliy qo'llanilishi.

⚡ Quick Cheat Sheet

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

---