Node.js
Debounce ve throttle
Debounce ve throttle desenlerini öğrenirsin.
Debounce ve throttle
Debounce ve throttle, bir fonksiyonun çağrı sıklığını sınırlayan iki desendir. Debounce, son çağrıdan belirli bir süre sonra bir kez çalıştırır. Throttle, belirli aralıklarla en fazla bir kez çalıştırır.
Debounce örneği: bir arama kutusunda her tuş vuruşunda API çağrısı yapmak yerine, kullanıcı yazmayı bıraktıktan 300 ms sonra bir kez çağırırsın. function debounce(fn, delay) { let timer = null; return function(...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => { fn.apply(null, args); timer = null; }, delay); }; }. Üst üste üç çağrı yaparsan, yalnızca son çağrıdan delay ms sonra bir kez çalışır. clearTimeout önceki zamanlayıcıyı iptal eder; böylece yalnızca son çağrı hayatta kalır. Bu, gereksiz iş yükünü azaltır.
setTimeout ile gecikme
Debounce'un çekirdeği setTimeout'tür. setTimeout(() => { fn.apply(null, args); }, delay) fonksiyonu delay milisaniye sonra çağırır. Her yeni çağrıda clearTimeout(timer) ile önceki zamanlayıcı iptal edilir ve yeni biri kurulur.
Sonuç: yalnızca son çağrıdan delay ms sonra fonksiyon bir kez çalışır. fn.apply(null, args) ile orijinal argümanlar korunur. timer = null ataması, iş tamamlandıktan sonra zamanlayıcı referansını temizler. Bu desen, arama kutuları, pencere yeniden boyutlandırma ve kaydırma gibi sık tetiklenen olaylarda kullanılır. Throttle ise farklı çalışır: ilk çağrıyı hemen yapar, sonraki çağrıları delay süresince yok sayar. Debounce bekler, throttle sınırlar.
Uygulama debounce fonksiyonu yaz
function debounce(fn, delay) yaz: let timer = null;. Dışarıda return function(...args) { if (timer) clearTimeout(timer); timer = setTimeout(() => { fn.apply(null, args); timer = null; }, delay); }. main hazır: fn üç kez çağrılır, 100 ms sonra console.log("Bekleyen: " + calls).
Örnek çözümü göster
function debounce(fn, delay) {
let timer = null;
return function(...args) {
if (timer) clearTimeout(timer);
timer = setTimeout(() => {
fn.apply(null, args);
timer = null;
}, delay);
};
}
let calls = 0;
const fn = debounce(function() {
calls++;
console.log("Çağrıldı: " + calls);
}, 50);
fn();
fn();
fn();
setTimeout(() => {
console.log("Bekleyen: " + calls);
}, 100);
Kendini test et
-
clearTimeout çağrısını tamamla
if (timer) ____(timer);
Cevabı göster
if (timer) clearTimeout(timer);
-
Parçayı rolüne eşle
- setTimeout
- Gecikmeli çağrı kurar
- clearTimeout
- Önceki zamanlayıcıyı iptal eder
- debounce
- Son çağrıdan sonra bir kez
- throttle
- Aralık başına en fazla bir kez
-
Üst üste üç debounce çağrısından sonra ne olur?
const fn = debounce(f, 50); fn(); fn(); fn();
- Üç kez çalışır
- Hiç çalışmaz
- Yalnızca son çağrıdan 50 ms sonra bir kez çalışır
- Hemen üç kez çalışır
Cevabı göster
Yalnızca son çağrıdan 50 ms sonra bir kez çalışır — Debounce yalnızca son çağrıdan delay ms sonra bir kez çalışır.
Sıradaki ders: Özet - Async desenler
