Yan yana

DebouncevsThrottling

Q: Kaydırma olayları için hangisini kullanmalıyım?

Throttle; ekranda bir şeyi güncelliyorsanız requestAnimationFrame. Debounce edilmiş bir kaydırma işleyicisi, kullanıcı kaydırmayı bırakana kadar hiçbir şey yapmaz.

Debounce ile throttle arasındaki fark nedir?

Güncellendi 5 Ekim 20262 dk okuma7 fark

Kısaca

Debounce, 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.

Web Geliştirmes. 13

Debounce

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 sayfasını oku

Web Geliştirmes. 48

Throttling

Throttling, bir fonksiyonu ne kadar sık çağrılırsa çağrılsın aralık başına en fazla bir kez çalıştırır; böylece kaydırma işleyicileri düzenli güncellenir.

Throttling sayfasını oku

Debounce ve Throttling karşılaştırması

Özellik	Debounce	Throttling
Ne zaman çalışır	Olaylar bekleme süresi boyunca durduktan sonra bir kez	Olaylar sürerken düzenli olarak, aralık başına en fazla bir kez
Uzun bir patlama boyunca	Hiç çalışmaz	Düzenli bir hızda tekrar tekrar çalışır
İlk çalışma	Ancak son olayı izleyen bekleme süresinden sonra	Hemen, ilk çağrıda
En uygun olduğu yer	Yazarken arama, otomatik kaydetme, doğrulama, yeniden boyutlandırmanın sonu	Kaydırma, sürükleme, ilerleme güncellemeleri, süren yeniden boyutlandırma
Tipik süre	200 ila 500 ms bekleme	50 ila 200 ms aralık ya da bir animasyon karesi
Risk	Bekleme çok uzunsa yavaş hissettirir	Sondaki son çağrı yoksa son durumu kaçırabilir
Yardımcılar	Lodash ve benzeri kütüphanelerdeki `debounce`	Aynı kütüphanelerdeki `throttle` ya da `requestAnimationFrame`

Fark, açıklamalı

İkisi de aksi hâlde her tuş vuruşunda, her kaydırma adımında ya da her yeniden boyutlandırmada çalışacak fonksiyonları dizginler. Debounce her olayda bir zamanlayıcıyı yeniden başlatır ve fonksiyonu ancak olaylar bekleme süresinin tamamı boyunca, örneğin 300 milisaniye, sessiz kaldıktan sonra çalıştırır. Throttle ise fonksiyonu çalıştırır, ardından aralık dolana kadar gelen çağrıları yok sayar; böylece uzun bir patlama boyunca düzenli olarak, örneğin her 100 milisaniyede bir, çalışır.

Fark, kullanıcı devam ettiğinde ortaya çıkar. 300 ms'lik bir debounce ile on harfli bir arama yazmak son harften sonra tek bir istek gönderir; 300 ms'lik bir throttle ile ise kullanıcı hâlâ yazarken birkaç istek gider. Debounce edilmiş bir işleyiciyle üç saniye kaydırmak, kaydırma durana kadar hiçbir şeyi güncellemez; throttle edilmiş bir işleyici ise bütün süre boyunca düzenli güncelleme yapar.

Yani seçim, kullanıcının neyi görmesi gerektiğinden çıkar. Arama, otomatik kaydetme, form doğrulama ya da yeniden boyutlandırmadan sonra yerleşimi hesaplamak gibi yalnızca son değerin önemli olduğu durumlarda debounce kullanın. Sonsuz kaydırma, ilerleme çubuğu, küçülen bir başlık ya da sürükleme gibi ekranın eyleme yetişmesi gereken durumlarda throttle kullanın. Bazı yardımcılar ikisini birleştiren, en uzun bekleme süreli bir debounce sunar: bir duraklama bekler ama yine de belli aralıklarla çalışır.

İkisi de işi hızlandırmaz; yalnızca daha seyrek yapılmasını sağlar ve ikisi de bir miktar gecikme ekler. Animasyon için requestAnimationFrame çoğu zaman ikisinden de iyidir, çünkü ekranla uyumlu olarak kare başına bir kez çalışır.

Hangisini kullanmalısınız?

Debounce şu durumlarda doğru seçim:

Arama kutusu ya da otomatik kaydetme gibi yalnızca son değer önemli.
İş, bir ağ isteği gibi pahalı ve her duraklamada bir kez çalışmalı.
Eylem sırasında çalışmak, kullanıcının çoktan geçtiği sonuçları göstermek olur.

Throttling şu durumlarda doğru seçim:

Kullanıcı kaydırırken, yeniden boyutlandırırken ya da sürüklerken güncellemeleri görmeli.
Uzun ve sürekli bir eylem yine de düzenli olarak iş tetiklemeli.
İşin ne sıklıkla çalışacağına kesin bir üst sınır gerekiyor.

Debounce edilmiş bir arama kutusu ve throttle edilmiş bir kaydırma işleyicisi

Debouncejavascript

// Debounce: one request after the user stops typing
search.addEventListener("input", debounce((event) => {
  fetchResults(event.target.value);
}, 300));

Throttlingjavascript

// Throttle: check the position at most every 100 ms while scrolling
window.addEventListener("scroll", throttle(() => {
  header.classList.toggle("compact", window.scrollY > 80);
}, 100));

Sık sorulan sorular

Bir arama kutusu için hangisini kullanmalıyım?

Debounce. Kullanıcı en son ne yazdıysa onun sonuçlarını önemser; kısa bir duraklamadan sonra gönderilen tek bir istek de sunucuyu yarım yazılmış sözcükler için gelecek pek çok istekten kurtarır.

Kaydırma olayları için hangisini kullanmalıyım?

Throttle; ekranda bir şeyi güncelliyorsanız requestAnimationFrame. Debounce edilmiş bir kaydırma işleyicisi, kullanıcı kaydırmayı bırakana kadar hiçbir şey yapmaz.

İkisini birlikte kullanabilir miyim?

Evet. Bazı yardımcılar en uzun bekleme süreli bir debounce sunar: bir duraklama bekler, ama olaylar sınırdan uzun sürerse yine de çalışır. Bu, uzun düzenleme oturumlarında otomatik kaydetmeye uyar.