Debounce nima?

Savol

Debounce nima va u qachon qo'llaniladi?

Qisqa javob

Debounce — bu yangi chaqiruvlarsiz belgilangan pauza o'tguncha funksiya chaqiruvini kechiktiradigan texnika: har bir yangi chaqiruv taymerni qaytadan qayta boshlaydi va funksiya haqiqatda faqat bir marta — hodisalar kelishi to'xtagandan keyin — bajariladi.

Batafsil javob

Debounce tez-tez sodir bo'ladigan hodisaning (matn kiritish, oyna o'lchamini o'zgartirish, skroll) har bir ishga tushishida qimmat amalni (serverga so'rov, murakkab render, validatsiya) bajarmaslik uchun ishlatiladi. Buning o'rniga funksiya foydalanuvchi "tinchlangandan" keyin bir marta bajariladi.

setTimeout va chaqiruvlar orasida taymer identifikatorini saqlaydigan closure orqali amalga oshiriladi:

1. Debounce qilingan funksiyaning har bir chaqiruvida oldingi taymer bekor qilinadi (clearTimeout).
2. delay ms'ga yangi taymer qo'yiladi.
3. Agar shu vaqt ichida yangi chaqiruvlar bo'lmasa — asl funksiya bajariladi.

Debounce'ni throttledan farqlash kerak: throttle funksiyaning delay ms'da bir martadan ko'p bajarilmasligini kafolatlaydi (hodisalar oqimi to'xtaganmi yoki yo'qmi — baribir, tekis), debounce esa to'liq pauzagacha bajarilishni kechiktiradi.

Misol

function debounce(fn, delay) {
  let timeoutId
  return function (...args) {
    clearTimeout(timeoutId)
    timeoutId = setTimeout(() => fn.apply(this, args), delay)
  }
}

const input = document.querySelector('#search')
const handleSearch = debounce((event) => {
  fetch(`/api/search?q=${event.target.value}`)
}, 300)

input.addEventListener('input', handleSearch)
// So'rov serverga foydalanuvchi yozishni to'xtatgandan
// keyin faqat 300ms o'tgach yuboriladi

Qo'shimcha savollar

• Debounce throttle'dan nimasi bilan farq qiladi va qachon nimani ishlatish kerak?
• "Zudlik bilan" birinchi chaqiruv (leading edge) bilan debounce'ni qanday amalga oshirish mumkin?
• Debounce/throttle mashhur kutubxonalarda (lodash, VueUse) qanday amalga oshirilgan?