JavaScript timer funksiyalari (setTimeout, setInterval)

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

setTimeout — bir marta

JavaScript

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 darsidan ma’lum: setTimeout kodni to’xtatmaydi, faqat navbatga qo’yadi.

Timerni bekor qilish

setTimeout identifikator qaytaradi — u orqali to’xtatiladi:

JavaScript

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

JavaScript

let soni = 0;

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

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

Sanoq — amaliy misol

JavaScript

const h = document.querySelector("#sanoq");
let qolgan = 10;
let id = null;

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

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

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

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

Sahifa

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

Kechikish aniq emas

JavaScript

const boshi = Date.now();

setTimeout(() => {
console.log("So'ralgan: 100 ms");
console.log("Aslida:", Date.now() - boshi, "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:

JavaScript

let soni = 0;

function takrorla() {
soni++;
console.log("Qadam:", soni);

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

takrorla();

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

Debounce — yozish tugaguncha kutish

JavaScript

const input = document.querySelector("#qidiruv");
const p = document.querySelector("#natija");
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"));

Sahifa

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

Throttle

JavaScript

function throttle(amal, oraliq) {
let ruxsat = true;

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

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

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

Beshta chaqiruvdan faqat bir qismi o’tdi — closure ichidagi ruxsat qolganini to’sdi.

Promise bilan kechikish

JavaScript

function kut(ms) {
return new Promise((bajar) => setTimeout(bajar, ms));
}

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

jarayon();

Bu funksiya async/await bilan birga eng ko’p ishlatiladigan yordamchilardan biri.

Amaliy mashq

setTimeout bilan 2 soniyadan keyin xabar chiqaring;
uni clearTimeout bilan bekor qiling;
setInterval bilan 5 martadan keyin to’xtaydigan sanoq yozing;
tugmani ikki marta bosganda ikkita timer ishga tushmasligini ta’minlang;
input uchun debounce yozing;
kut(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 — ko’p elementni bitta tinglovchi bilan boshqarish.