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.

Code

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 = []
	}
}

Debounce Nasıl Çalışır?

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.

Kullanım Alanları

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.