JavaScript Debounce ile Canlı Aramayı Hızlandırma

JavaScript Debounce ile Canlı Aramayı Hızlandırma hakkında dağınık bilgiler yerine derli toplu bir kaynak arıyorsanız doğru yerdesiniz. Bu yazı 5 temel noktayı ve bunları bir araya getiren JavaScript örneğini sade bir dille açıklıyor.

Temel kavram ve amaç

Arama kutusuna yazılan her harf için sunucuya istek göndermek hem sunucuyu yorar hem de sonuçların karışık sırayla gelmesine yol açar. Debounce tekniği, kullanıcı yazmayı bıraktıktan kısa bir süre sonra tek bir istek gönderir. AbortController ile de eski isteği iptal ederek yalnızca son sonucu gösteririz.

Öne çıkan noktalar

• Debounce: Art arda gelen olaylardan yalnız sonuncusu, belirlenen bekleme süresinden sonra işlenir.
• Bekleme süresi: Arama için 250-400 ms çoğu kullanıcıya anlık gibi gelir.
• AbortController: Yeni istek başlarken eski istek iptal edilir; geç gelen eski sonuç ekranı ezmez.
• encodeURIComponent: Türkçe karakter ve boşluk içeren aramalar adres içinde güvenle taşınır.
• Throttle farkı: Kaydırma gibi sürekli olaylarda belirli aralıklarla çalıştırmak (throttle) daha uygundur.

Uygulamalı örnek

Teoriyi somutlaştırmak için kısa bir JavaScript örneğine bakalım:

function debounce(fn, ms = 300) {
  let zamanlayici;
  return (...args) => {
    clearTimeout(zamanlayici);
    zamanlayici = setTimeout(() => fn(...args), ms);
  };
}

let kontrol;
const ara = debounce(async (metin) => {
  kontrol?.abort();
  kontrol = new AbortController();
  const yanit = await fetch(`/api/ara?q=${encodeURIComponent(metin)}`, { signal: kontrol.signal });
  sonuclariGoster(await yanit.json());
}, 300);

document.querySelector('#arama').addEventListener('input', (e) => ara(e.target.value.trim()));

Örnek bilinçli olarak kısa tutuldu; gerçek projede hata yönetimi ve günlükleme gibi katmanlar eklenmelidir.

Size ne kazandırır?

JavaScript Debounce ile Canlı Aramayı Hızlandırma konusunu doğru uygulamanın başlıca kazanımları şunlar:

• Bakımı kolay ve okunur bir kod tabanı sağlar
• Farklı cihaz ve tarayıcılarda tutarlı sonuç verir
• Ekip içinde ortak bir uygulama standardı oluşturur
• Sayfa performansını ve kullanıcı deneyimini iyileştirir

Özetle

Bu yazı boyunca JavaScript Debounce ile Canlı Aramayı Hızlandırma konusunun temel taşlarını ve uygulamada dikkat edilmesi gerekenleri gördük. Özellikle Debounce ve Throttle farkı başlıklarını uygulamaya geçirmek iyi bir başlangıç olur.

İlgili içerikler:

• MySQL İndeksleri ile Sorgu Hızlandırma
• JavaScript Fetch API ve async/await ile Veri Çekme
• PHP ile Güvenli Oturum Yönetimi: 7 Altın Kural

Daha fazla uygulamalı içerik için Akademi derslerine ve blog yazılarına göz atabilirsiniz.