JavaScript'te Debouncing ve Throttling Nedir? Kapsamlı Rehber

Giriş

Web geliştirme sırasında kullanıcı deneyimini iyileştirmek ve performansı artırmak için debouncing ve throttling teknikleri yaygın olarak kullanılır. Bu teknikler, özellikle olay dinleyicileriyle (event listeners) çalışırken, gereksiz çağrıları azaltarak uygulamanın daha verimli çalışmasını sağlar.

Bu yazıda, debouncing ve throttling kavramlarını detaylı bir şekilde ele alacağız, nasıl çalıştıklarını ve hangi durumlarda kullanılmaları gerektiğini açıklayacağız.

1. Debouncing Nedir?

Debouncing, belirli bir olayın (event) tekrar tekrar tetiklenmesini önlemek için kullanılan bir tekniktir. Olay belirli bir süre boyunca tetiklenmezse ancak o zaman çalıştırılır.

Nasıl Çalışır?

Bir olayın meydana gelmesinden sonra belirli bir süre boyunca başka bir olay meydana gelmezse, yalnızca o zaman ilgili fonksiyon çağrılır. Eğer olay belirlenen süre içinde tekrar tetiklenirse, zamanlayıcı sıfırlanır ve tekrar beklenir.

Örnek Senaryo:

Kullanıcı bir arama çubuğuna yazı yazarken, her harf yazıldığında sunucuya istek göndermek yerine, kullanıcının yazmayı bitirdiğinden emin olduktan sonra tek bir istek göndermek için debouncing kullanabiliriz.

Debouncing Örneği:

function debounce(func, delay) {
    let timer;
    return function(...args) {
        clearTimeout(timer);
        timer = setTimeout(() => func.apply(this, args), delay);
    };
}

function searchQuery(query) {
    console.log("API çağrısı yapılıyor: " + query);
}

const optimizedSearch = debounce(searchQuery, 500);

document.getElementById("search").addEventListener("input", (event) => {
    optimizedSearch(event.target.value);
});

Bu kodda, kullanıcının her tuşa basmasında debounce fonksiyonu çalışır, ancak sadece belirlenen süre boyunca (500ms) yeni bir giriş olmazsa searchQuery fonksiyonu çağrılır.

2. Throttling Nedir?

Throttling, belirli bir süre aralığında yalnızca bir kez fonksiyon çalıştırılmasını sağlayan bir tekniktir. Örneğin, bir olay sürekli tetikleniyorsa, throttling sayesinde belirli bir zaman aralığında yalnızca bir çağrı yapılır.

Nasıl Çalışır?

Throttling, bir olay belirli bir zaman dilimi içinde birçok kez tetiklendiğinde, yalnızca ilk çağrıyı gerçekleştirir ve belirlenen süre dolana kadar diğer çağrıları engeller.

Örnek Senaryo:

Bir sayfa kaydırma (scroll) etkinliği sürekli olarak tetiklenir. Ancak her kaydırma hareketinde bir işlem yapmak yerine, belirli aralıklarla bir işlem yapmak performans açısından daha iyidir. Bunun için throttling kullanabiliriz.

Throttling Örneği:

function throttle(func, limit) {
    let inThrottle;
    return function(...args) {
        if (!inThrottle) {
            func.apply(this, args);
            inThrottle = true;
            setTimeout(() => inThrottle = false, limit);
        }
    };
}

function logScroll() {
    console.log("Sayfa kaydırıldı: " + new Date().toISOString());
}

const optimizedScroll = throttle(logScroll, 1000);

document.addEventListener("scroll", optimizedScroll);

Bu kodda, throttle fonksiyonu sayesinde, sayfa kaydırma (scroll) olayı sürekli tetiklense bile en fazla 1000ms (1 saniye) aralıklarla logScroll fonksiyonu çalışır.

3. Debouncing ve Throttling Karşılaştırması

4. Hangi Durumda Hangi Teknik Kullanılmalı?

5. Sonuç

Debouncing ve throttling, performansı optimize etmek için çok önemli tekniklerdir. Debouncing, bir olayın tekrar tekrar tetiklenmesini önleyerek gereksiz işlemleri engellerken, throttling olayları belirli bir zaman aralığında sınırlandırarak performansı artırır.

Bu teknikleri uygun senaryolarda kullanarak, web uygulamalarınızın verimli ve hızlı çalışmasını sağlayabilirsiniz. ????