Debounce
Sık tetiklenen bir olayı debounce ile belirli bir süre bekleyerek çalıştırmayı öğrenirsin.
Debounce
Debounce, sık tetiklenen bir olayı belirli bir süre bekleyip sonra çalıştıran bir tekniktir. Her tetikleme önceki zamanlayıcıyı iptal eder ve yeniden saymaya başlar.
Örneğin arama kutusunda her tuş basışında sorgu yapmak yerine, kullanıcı yazmayı bırakıp biraz bekleyince tek bir sorgu yaparsın. Bu, gereksiz ağ isteklerini azaltır.
Uygulama Debounce fonksiyonu
debounce adında bir fonksiyon yaz. fn ve delay parametrelerini alıp zamanlayıcı ile geciktiren bir sarmalayıcı döndürsün. Her çağrıda önceki sayacı clearTimeout ile temizlesin.
Örnek çözümü göster
timer değişkeni tut; her çağrıda clearTimeout(timer) sonra setTimeout.
Örnek çözüm:
function debounce(fn, delay) {
let timer = null;
return function(...args) {
clearTimeout(timer);
timer = setTimeout(() => fn(...args), delay);
};
}Debounce nerelerde?
Debounce en çok arama kutuları, pencere yeniden boyutlandırma ve form doğrulama gibi kullanıcı duraksayana kadar beklemek istediğin yerlerde kullanılır.
Tipik gecikme 200-400 ms arasıdır. Çok kısa olursa gereksiz çağrılar kaçmaz; çok uzun olursa arayüz yavaş hissedilir. En uygun değeri kullanım senaryosuna göre deneyerek bulursun.
Kendini test et
-
Debounce'lu bir fonksiyon her tetiklendiğinde ne olur?
- Önceki zamanlayıcı iptal edilir, yeni başlar
- Hemen çalışır ve biter
- Hiç çalışmaz
- Her seferinde iki kez çalışır
Cevabı göster
Önceki zamanlayıcı iptal edilir, yeni başlar — Doğru! Her tetikleme önceki sayacı iptal eder ve yeni bir bekleme süresi başlatır.
-
Debounce iskeleti
clearTimeout(____); timer = setTimeout(() => fn(...args), delay);Cevabı göster
clearTimeout(timer); timer = setTimeout(() => fn(...args), delay); -
Debounce terimlerini eşleştir
- setTimeout
- gecikmeli çağrı
- clearTimeout
- sayacı iptal et
- trailing call
- son çağrı çalışır
- delay
- bekleme süresi