# JavaScript timer funksiyalari (setTimeout, setInterval)

> setTimeout va setInterval bilan vaqt bo'yicha kod bajarish, timerni to'xtatish, debounce va throttle naqshlari. Amaliy misollar bilan o'rganing.

Manba: https://learncode.uz/javascript/timerlar/
Sana: 2026-06-05

Bildirishnomani uch soniyadan keyin yashirish, soatni har soniya yangilash,
foydalanuvchi yozishni tugatganda qidiruv yuborish — bularning barchasi
**timer** funksiyalari bilan bajariladi.

## setTimeout — bir marta

```js
console.log("Boshlandi");

setTimeout(() => {
  console.log("500 ms o'tdi");
}, 500);

setTimeout(() => {
  console.log("1000 ms o'tdi");
}, 1000);

console.log("Bu darhol chiqadi");
```

[Callback](https://learncode.uz/javascript/callback) darsidan ma'lum: `setTimeout` kodni
to'xtatmaydi, faqat navbatga qo'yadi.

## Timerni bekor qilish

`setTimeout` identifikator qaytaradi — u orqali to'xtatiladi:

```js
const id = setTimeout(() => {
  console.log("Bu hech qachon chiqmaydi");
}, 1000);

clearTimeout(id);
console.log("Timer bekor qilindi, id:", typeof id);

setTimeout(() => console.log("Bu esa chiqadi"), 300);
```

## setInterval — takroriy

```js
let count = 0;

const id = setInterval(() => {
  count++;
  console.log("Takror:", count);

  if (count >= 5) {
    clearInterval(id);
    console.log("To'xtatildi");
  }
}, 300);
```

> **clearInterval majburiy**
>
> `setInterval` **cheksiz** takrorlanadi. To'xtatish shartini yozishni
> unutsangiz, u sahifa yopilguncha ishlab, xotira va protsessorni band qiladi.
> Har `setInterval` uchun uni to'xtatadigan joy bo'lishi kerak.

## Sanoq — amaliy misol

```js
const h = document.querySelector("#countdown");
let remaining = 10;
let id = null;

document.querySelector("#start").addEventListener("click", () => {
  if (id !== null) return;

  id = setInterval(() => {
    remaining--;
    h.textContent = remaining;

    if (remaining <= 0) {
      clearInterval(id);
      id = null;
      h.textContent = "Vaqt tugadi!";
    }
  }, 500);
});

document.querySelector("#toxtat").addEventListener("click", () => {
  clearInterval(id);
  id = null;
});
```

```html
<h2 id="countdown">10</h2>
<button id="start">Boshlash</button>
<button id="toxtat">To'xtatish</button>
```

`id !== null` tekshiruvi ikki marta bosilganda ikkita timer ishga
tushishining oldini oladi — bu keng uchraydigan xato.

## Kechikish aniq emas

```js
const startTime = Date.now();

setTimeout(() => {
  console.log("So'ralgan: 100 ms");
  console.log("Aslida:", Date.now() - startTime, "ms");
}, 100);

let s = 0;
for (let i = 0; i < 5000000; i++) s += i;
console.log("Og'ir hisob tugadi");
```

Kechikish so'ralganidan **ko'proq** bo'ldi: JavaScript bir oqimda ishlaydi,
callback navbatda kutdi. `setTimeout` — "shuncha vaqtdan keyin **eng erta**"
degani.

## setTimeout bilan takrorlash

`setInterval` o'rniga zanjirli `setTimeout` ko'pincha xavfsizroq:

```js
let count = 0;

function repeat() {
  count++;
  console.log("Qadam:", count);

  if (count < 4) {
    setTimeout(repeat, 300);
  } else {
    console.log("Tugadi");
  }
}

repeat();
```

Farqi: bu yerda keyingi kechikish oldingisi **tugagandan keyin** boshlanadi.
`setInterval` esa oldingisi tugamasa ham navbatga qo'yaveradi.

## Debounce — yozish tugaguncha kutish

```js
const input = document.querySelector("#search");
const p = document.querySelector("#result");
let id = null;

input.addEventListener("input", () => {
  clearTimeout(id);
  p.textContent = "yozilmoqda...";

  id = setTimeout(() => {
    p.textContent = "Qidirilmoqda: " + input.value;
    console.log("So'rov yuborildi:", input.value);
  }, 600);
});

input.value = "javascript";
input.dispatchEvent(new Event("input"));
```

```html
<input id="search" placeholder="Qidiruv...">
<p id="result">—</p>
```

Har bosishda oldingi timer bekor qilinadi — so'rov faqat foydalanuvchi
**to'xtaganda** yuboriladi. Aks holda har harf uchun alohida so'rov ketardi.

> **Atama**
>
> **Debounce** — takroriy hodisalarni kutib, faqat **oxirgisidan keyin** amal
> bajarish. **Throttle** esa amalni belgilangan oraliqda **bir martadan ko'p
> bajarmaslik**. Birinchisi qidiruv maydoniga, ikkinchisi sahifa aylantirishga
> mos.

## Throttle

```js
function throttle(action, oraliq) {
  let allowed = true;

  return (...args) => {
    if (!allowed) return;
    allowed = false;
    action(...args);
    setTimeout(() => { allowed = true; }, oraliq);
  };
}

const write = throttle((n) => console.log("Bajarildi:", n), 300);

for (let i = 1; i <= 5; i++) {
  setTimeout(() => write(i), i * 100);
}
```

Beshta chaqiruvdan faqat bir qismi o'tdi — [closure](https://learncode.uz/javascript/scope-closure)
ichidagi `ruxsat` qolganini to'sdi.

## Promise bilan kechikish

```js
function wait(ms) {
  return new Promise((resolve) => setTimeout(resolve, ms));
}

async function process() {
  console.log("Boshlandi");
  await wait(300);
  console.log("300 ms o'tdi");
  await wait(300);
  console.log("Yana 300 ms o'tdi");
}

process();
```

Bu funksiya [async/await](https://learncode.uz/javascript/async-await) bilan birga eng ko'p
ishlatiladigan yordamchilardan biri.

## Amaliy mashq

1. `setTimeout` bilan 2 soniyadan keyin xabar chiqaring;
2. uni `clearTimeout` bilan bekor qiling;
3. `setInterval` bilan 5 martadan keyin to'xtaydigan sanoq yozing;
4. tugmani ikki marta bosganda ikkita timer ishga tushmasligini ta'minlang;
5. input uchun debounce yozing;
6. `wait(ms)` funksiyasini yozib, `await` bilan ishlating.

## Qisqacha xulosa

- `setTimeout` bir marta, `setInterval` takror bajaradi.
- Ikkalasi identifikator qaytaradi — `clearTimeout`/`clearInterval` bilan
  to'xtatiladi.
- Har `setInterval` uchun to'xtatish sharti bo'lishi shart.
- Kechikish aniq emas: "eng erta shuncha vaqtdan keyin".
- **Debounce** oxirgi hodisadan keyin, **throttle** oraliqda bir marta ishlaydi.
- `setTimeout` ni Promise'ga o'rab, `await kut(ms)` yozish mumkin.

Keyingi darsda [hodisa delegatsiyasi](https://learncode.uz/javascript/hodisa-delegatsiya) —
ko'p elementni bitta tinglovchi bilan boshqarish.