Throttle

Throttle ile bir fonksiyonun belirli aralıklarla en fazla bir kez çalışmasını sağlarsın.

Throttle

Throttle, bir fonksiyonun belirli bir zaman aralığında en fazla bir kez çalışmasını sağlar. Debounce gibi bekletmez; bunun yerine aralık dolana kadar çağrıları yok sayar.

Örneğin kaydırma olayında her pikselde işlem yapmak yerine, 100 ms'de bir güncelleme yaparsın. Bu, hem performansı korur hem de akıcı bir deneyim sunar.

Leading ve trailing

Throttle'ın iki yaygın biçimi vardır. Leading modunda aralık başında ilk çağrı hemen çalışır; trailing modunda ise aralık sonundaki son çağrı bekletilen bir kez daha eklenir.

Çoğu uygulama yalnızca leading modu kullanır; ancak bazıları her ikisini birden ister. İhtiyacına göre seçersin ve davranışı tutarlı tutarsın.

Uygulama Throttle fonksiyonu

throttle adında bir fonksiyon yaz. fn ve interval parametrelerini alıp lastRun ile son çalışma anını takip eden bir sarmalayıcı döndürsün. Date.now() ile şimdiki zamanı alıp aralık dolunca fonksiyonu çağırsın.

Örnek çözümü göster

lastRun = 0 ile başla; her çağrıda Date.now() al, koşul sağlanınca çalıştır ve lastRun = now yap.

Örnek çözüm:
function throttle(fn, interval) {
  let lastRun = 0;
  return function(...args) {
    const now = Date.now();
    if (now - lastRun >= interval) {
      lastRun = now;
      fn(...args);
    }
  };
}

Kendini test et

Throttle koşulu

if (now - lastRun >= ____) {
  lastRun = now;
  fn(...args);
}

Cevabı göster

if (now - lastRun >= interval) {
  lastRun = now;
  fn(...args);
}

Throttle'lı bir fonksiyon hızlı çağrılırsa ne olur?
- Tüm çağrılar biriktirilir ve en sondaki çalışır
- İlk çağrı çalışır, gerisi yok sayılır
- Aralık dolana kadar çağrılar yok sayılır
- Her çağrı bir defa çalışır
Cevabı göster

Aralık dolana kadar çağrılar yok sayılır — Doğru! Throttle, aralık dolana kadar gelen çağrıları yok sayar.
Throttle terimlerini eşleştir

interval

minimum süre
lastRun

son çalışma anı
leading

ilk çağrı çalışır
trailing

son çağrı tamamlanır

Sıradaki ders: Bellek sızmaları

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler