Debounce

Okunuşu: dibauns

Güncellendi 3 Ekim 20262 dk okuma

Kısaca

Debounce, bir fonksiyonu art arda gelen olaylar belli bir süre durana dek ertelemektir; böylece arama kutusu her tuşta değil, yazma bitince istek gönderir.

Debounce nedir?

Bazı tarayıcı olayları çok sık tetiklenir: her tuş vuruşu, her kaydırma adımı, pencere yeniden boyutlandırılırken her piksel. Her birinde bir API isteği ya da yerleşim hesabı gibi pahalı bir iş çalıştırmak kaynak israfıdır ve sayfanın takılmasına yol açabilir. Debounce edilmiş bir fonksiyon her olayda bir zamanlayıcıyı yeniden başlatır ve ancak olaylar örneğin 300 milisaniye boyunca durduğunda bir kez çalışır.

Kardeşi throttling'dir; kaç olay gelirse gelsin fonksiyonun her aralıkta en fazla bir kez çalışmasını garanti eder. Throttling, kaydırırken ya da sürüklerken bir konumu güncellemek gibi düzenli güncellemelerin önemli olduğu sürekli işlere uyar; debounce ise yazarken arama, otomatik kaydetme ya da bir alanı doğrulamak gibi yalnızca son değerin önemli olduğu işlere.

Debounce, olağan seçim olan arka kenarda (trailing edge), yani duraklamadan sonra çalışabilir; ya da ön kenarda (leading edge), yani ilk olayda hemen çalışıp serinin geri kalanını yok sayabilir; bu da iki kez tıklanmaması gereken düğmelere uyar. Lodash gibi yardımcı kütüphaneler iki fonksiyonu da sunar; elle yazmak da yalnızca birkaç satırdır.

Sık yapılan bir yanlış, debounce'un bir uygulamayı hızlandırdığını düşünmektir. İşin ne sıklıkla yapıldığını azaltır, ama sonuç görünmeden önce bir gecikme de ekler. Bekleme süresini hızlı hissettirecek şekilde seçin ve önceki isteklerin geç yanıtlarının yine gelebileceğini unutmayın; bu yüzden arama kodu eskimiş istekleri iptal etmeli ya da yok saymalıdır.

Önemli noktalar

Debounce, olaylar belirli bir süre durana kadar bekler, sonra bir kez çalışır.
Throttle, sürekli olaylar sırasında her aralıkta en fazla bir kez çalışır.
Yazarken arama, otomatik kaydetme ve doğrulama için debounce kullanın.
Kaydırma, yeniden boyutlandırma ve sürükleme için throttle kullanın.
Kısa bir gecikme ekler; eskimiş isteklerin de ele alınması gerekir.

Örnek

Bir arama kutusunu debounce etmekjavascript

function debounce(fn, wait) {
  let timer;
  return (...args) => {
    clearTimeout(timer);                       // every new event restarts the wait
    timer = setTimeout(() => fn(...args), wait);
  };
}

const search = debounce(async (query) => {
  const results = await fetch(`/api/search?q=${encodeURIComponent(query)}`).then((r) => r.json());
  render(results);
}, 300);

document.querySelector("#q").addEventListener("input", (e) => search(e.target.value));
// Typing "react" sends one request, 300 ms after the last key.

Sık sorulan sorular

Debounce ile throttle arasındaki fark nedir?

Debounce bir duraklama bekler ve art arda gelen olayların sonunda bir kez çalışır. Throttle ise olaylar gelmeye devam ederken düzenli olarak, her aralıkta en fazla bir kez çalışır.

Debounce için ne kadar gecikme kullanmalıyım?

Yazma için 200 ile 400 milisaniye arası, her tuşta istek göndermeden hızlı hissettirir. Otomatik kaydetme gibi pahalı işler için bir saniye ya da daha fazlası yaygındır.

Debounce adı nereden geliyor?

Elektronikten: mekanik bir anahtar bir kez basıldığında sıçrar (bounce) ve birkaç sinyal gönderir; debounce devreleri de bu sinyal serisini tek bir basış olarak ele alır.

Sık karşılaştırılanlar

Debounce vs ThrottleDebounce, olay patlaması durana kadar bekler ve fonksiyonu bir kez çalıştırır; throttle ise olaylar sürerken onu aralık başına en fazla bir kez çalıştırır.

İlgili sayfalar

Kaynaklar

MDN: Debouncedeveloper.mozilla.org(yeni sekmede açılır)

Bu sayfada bir hata ya da eksik mi gördünüz?Düzeltme önerin