Comment on page
Debounce yapisi ile cok sik yapilan requestleri birlestirmek ve tek bir seferde yapmak
typescript, programming, debounce, project design, project pattern
Debouncing, çok kısa süreler içinde tekrar eden olayları (örneğin, bir kullanıcının bir düğmeye hızlıca birden fazla kez basması veya bir arama çubuğuna sürekli yazılması gibi) filtrelemek ve sadece belirli bir bekleme süresinin sonunda bir kez tepki vermek için kullanılır
- Bu teknik, gereksiz iş yükünü azaltarak uygulamanın performansını ve verimliliğini artırır.
- Performansı optimize etmek ve gereksiz işlemleri azaltmak için önemli bir tekniktir.
export class Debouncer<T> {
private requested = false
private onInittedCallbacks: ((data: T) => void)[] = []
constructor(
private readonly initData: () => Promise<T>,
private readonly debouncePeriod: number
) {}
request(onInitCallback?: (data: T) => void) {
if (onInitCallback) this.onInittedCallbacks.push(onInitCallback)
if (!this.requested) {
this.requested = true
setTimeout(async () => {
this.requested = false
await this.execute()
}, this.debouncePeriod * 1000)
}
}
private async execute() {
const data = await this.initData()
this.onInittedCallbacks.forEach(callback => callback(data))
this.onInittedCallbacks = []
}
}
- 1.Olay Tetiklendiğinde: Bir olay (örneğin, bir tuşa basma veya bir API çağrısı) ilk kez tetiklendiğinde, debounce fonksiyonu bir bekleme süresi başlatır.
- 2.Bekleme Süresi: Bu süre içinde, aynı olay tekrar tetiklenirse, bekleme süresi sıfırlanır ve yeniden başlar.
- 3.Süre Dolduğunda: Bekleme süresi dolduğunda ve bu süre içinde başka bir tetikleme olmazsa, belirtilen işlem (örneğin, bir fonksiyon çağrısı) gerçekleştirilir.
- 4.Tekrarlamalar Engellenir: Bu süre içinde tekrar eden tüm olaylar görmezden gelinir, böylece yalnızca bir kez tepki verilmiş olur.
Debouncing genellikle aşağıdaki gibi durumlarda kullanılır:
- Arama Çubukları: Kullanıcı arama terimlerini yazarken, her harf için ayrı bir API çağrısı yapmak yerine, kullanıcı yazmayı bitirdiğinde tek bir çağrı yapmak.
- Buton Tıklamaları: Kullanıcının yanlışlıkla bir düğmeye çok hızlı ard arda basmasını engellemek.
- Pencere Boyutlandırma: Bir pencerenin yeniden boyutlandırılması sırasında, boyut değişikliklerinin çok sık yapılmasını engellemek ve son boyut belirlendikten sonra bir kez tepki vermek.