Debounce ve throttle
- Node.js kursu
- Orta seviye
- Ders 51/116
- 5 dk
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).
Başlangıç kodu
// debounce(fn, delay) fonksiyonu yaz
// son çağrıdan delay ms sonra bir kez çalıştır
// buraya yazÖrnek çözüm
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);Beklenen çıktı
Çağrıldı: 1 Bekleyen: 1
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 clearTimeout çağrısını tamamla
if (timer) ____(timer);if (timer) clearTimeout(timer);Açıklama: clearTimeout önceki zamanlayıcıyı iptal eder.
2 Parçayı rolüne eşle
| Kavram | Anlamı |
|---|---|
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 |
3 Ü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 Doğru cevap
- Hemen üç kez çalışır
Açıklama: Debounce yalnızca son çağrıdan delay ms sonra bir kez çalışır.