Debounce ve throttle, web uygulamalarında performansı artırmak ve gereksiz fonksiyon çağrılarını engellemek için kullanılan iki temel JavaScript tekniğidir. Scroll, resize, input gibi sık tetiklenen olaylarda bu yöntemler sayesinde uygulamanızın tepki süresini iyileştirebilir, kaynak kullanımını azaltabilirsiniz. İşte debounce ve throttle arasındaki farklar, hangi durumda hangisini kullanmanız gerektiği ve pratik bir kontrol listesi.
Debounce ve Throttle Nedir? Temel Farkları Anlayın
Debounce, bir olayın son tetiklenmesinden belirli bir süre geçtikten sonra fonksiyonun çalışmasını sağlar. Örneğin, kullanıcı yazmayı bıraktıktan 300ms sonra arama yapmak. Throttle ise belirli bir zaman aralığında fonksiyonun en fazla bir kez çalışmasını garanti eder. Scroll olayında saniyede bir kez işlem yapmak gibi. İkisi de aşırı yüklemeyi önler ancak davranışları farklıdır.
Hangi Durumda Hangi Tekniği Kullanmalısınız?
- Debounce Kullanın: Kullanıcı girişi (autocomplete, arama), API isteklerini azaltma, pencere boyutu değişimi sonrası yeniden hesaplama.
- Throttle Kullanın: Scroll olayında infinite scroll, resize olayında animasyonlar, butona tıklama spam'ini önleme.
Debounce ve Throttle Uygulama Kontrol Listesi
Aşağıdaki adımları takip ederek projenizde doğru optimizasyonu yapabilirsiniz.
- 1. İhtiyacı Belirleyin: Olayın tetiklenme sıklığı ve yapılacak işin maliyetini değerlendirin. Ağır DOM güncellemeleri veya API çağrıları varsa mutlaka optimize edin.
- 2. Doğru Tekniği Seçin: Olayın sonucu bekleme gerektiriyorsa debounce (örneğin input), sürekli akış varsa throttle (scroll) tercih edin.
- 3. Gecikme Süresini Ayarlayın: Debounce için 300-400ms ideal. Throttle için 100-200ms yaygındır. Uygulamaya göre test edin.
- 4. İleri Düzey Yapılandırma: Debounce'da 'leading' ve 'trailing' seçeneklerini değerlendirin (ilk tetikte mi çalışsın, son tetikte mi). Next.js App Router gibi framework'lerde built-in hook'ları da inceleyin.
- 5. Test Edin: Konsol logları veya performans profiler ile fonksiyon çağrılarını izleyin. Gereksiz çağrıların azaldığından emin olun.
- 6. Kapsamlı Kullanım: Birden fazla olayda aynı tekniği kullanıyorsanız, yeniden kullanılabilir bir yardımcı fonksiyon yazın.
Yaygın Hatalar ve Dikkat Edilmesi Gerekenler
- Gereksiz Kullanım: Her olaya debounce/throttle eklemeyin. Hafif işlemlerde (örneğin bir class ekleme) ek yük oluşturabilir.
- Yanlış Süre Seçimi: Çok kısa sürede debounce etkisiz kalır, çok uzun sürede kullanıcı deneyimi kötüleşir.
- Unutulan Temizlik: React useEffect gibi yapılarda return ile temizleme yapmazsanız bellek sızıntısı olur. CSS Grid ile sayfa düzeni kurarken de performansa dikkat edin.
- Kapsam (Scope) Sorunları: setTimeout içinde `this` bağlamını kaybetmemek için arrow function veya bind kullanın.
Örnek Uygulama: React ile Input Debounce
React'te debounce uygulamak için özel bir hook yazabilirsiniz. İşte basit bir implementasyon:
import { useState, useEffect } from 'react';
function useDebounce(value, delay) {
const [debouncedValue, setDebouncedValue] = useState(value);
useEffect(() => {
const handler = setTimeout(() => setDebouncedValue(value), delay);
return () => clearTimeout(handler);
}, [value, delay]);
return debouncedValue;
}Bu hook, input değerini gecikmeli olarak günceller. API isteğini debouncedValue ile yapın. Benzer bir yaklaşımı React Native'de Hermes Motoru ile performans artırma yazımızda da bulabilirsiniz.
Performans Ölçümü ve Doğrulama
Optimizasyon sonrasında Chrome DevTools Performance sekmesi ile olay dinleyicilerinin sayısını ve fonksiyon çağrılarını kontrol edin. Gereksiz çağrı sayısı azalmış olmalı. Ayrıca Lighthouse puanınızı da yükselttiğini göreceksiniz.
Sıkça Sorulan Sorular
- Debounce ve throttle arasındaki ana fark nedir? Debounce, belirli bir süre boyunca yeni tetikleme olmazsa fonksiyonu çalıştırır. Throttle ise belirli aralıklarla fonksiyonun en fazla bir kez çalışmasını sağlar.
- Hangi durumda throttle tercih edilmelidir? Scroll, resize, mouse move gibi sürekli tetiklenen olaylar için throttle daha uygundur. Örneğin infinite scroll sırasında throttle kullanmak performansı artırır.
- Debounce gecikme süresi ne olmalıdır? Genelde 300-500ms idealdir. Kullanıcı deneyimine göre ayarlanabilir. Arama kutusu için 300ms yaygındır.
- React'te debounce nasıl uygulanır? Özel bir hook (useDebounce) yazarak veya lodash gibi bir kütüphane kullanarak uygulanabilir. useEffect ile temizlik yapmayı unutmayın.
- Debounce ve throttle aynı anda kullanılabilir mi? Bazı durumlarda evet. Örneğin, bir scroll olayında throttle ile belirli aralıklarla işlem yaparken, kullanıcı durduğunda son bir işlem yapmak için debounce eklenebilir.
Sık Sorulan Sorular
Debounce ve throttle arasındaki ana fark nedir?
Debounce, belirli bir süre boyunca yeni tetikleme olmazsa fonksiyonu çalıştırır. Throttle ise belirli aralıklarla fonksiyonun en fazla bir kez çalışmasını sağlar.
Hangi durumda throttle tercih edilmelidir?
Scroll, resize, mouse move gibi sürekli tetiklenen olaylar için throttle daha uygundur. Örneğin infinite scroll sırasında throttle kullanmak performansı artırır.
Debounce gecikme süresi ne olmalıdır?
Genelde 300-500ms idealdir. Kullanıcı deneyimine göre ayarlanabilir. Arama kutusu için 300ms yaygındır.
React'te debounce nasıl uygulanır?
Özel bir hook (useDebounce) yazarak veya lodash gibi bir kütüphane kullanarak uygulanabilir. useEffect ile temizlik yapmayı unutmayın.
Debounce ve throttle aynı anda kullanılabilir mi?
Bazı durumlarda evet. Örneğin, bir scroll olayında throttle ile belirli aralıklarla işlem yaparken, kullanıcı durduğunda son bir işlem yapmak için debounce eklenebilir.
