javascript - Typescript debounce fonksiyonu parametre olarak geçirilen fonksiyonu çağırmıyor

TypeScript ile bir debounce fonksiyonu yazmaya çalışıyorum.

Bunun bir örneğini burada buldum. Kod aşağıdadır:

export function debounce<Params extends any[]>(
  func: (...args: Params) => any,
  timeout: number,
): (...args: Params) => void {
  let timer: NodeJS.Timeout
  return (...args: Params) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      func(...args)
    }, timeout)
  }
}

Sorun şu ki:

  • Parametre olarak geçen fonksiyon, belirtilen zaman aşımından sonra çağrılmıyor
  • Lodash veya başka herhangi bir dış kütüphane kullanamıyorum çünkü bu projeye yeni bağımlılıklar eklememeye çalışıyorum.

Teşekkürler.

Cevap #1

debounce işlevinizi nasıl kullanıyorsunuz? Ben bir fiddle hazırladım, çalışan çözümü burada kontrol edebilirsiniz

function debounce<Params extends any[]>(
  func: (...args: Params) => any,
  timeout: number,
): (...args: Params) => void {
  let timer: NodeJS.Timeout
  return (...args: Params) => {
    clearTimeout(timer)
    timer = setTimeout(() => {
      func(...args)
    }, timeout)
  }
}

function test(message) {
  alert(message);
}

const debouncedTest = debounce(test, 2000);

debouncedTest('message');

Eh, bu TypeScript sorunları değil

Cevap #2

Bu, Saveli Tomac'ın mükemmel cevabına bir ek olarak tasarlanmıştır.

Yorumlarda bu uygulamanın özellikle iyi olduğunu düşünmediğimi söyledim. Özellikle iki sorunu var:

  1. Bunun hemen bir seçeneği yok. Yaban hayatta bulunan çoğu debounce uygulamasının (sorunuzda bağlantısını verdiğiniz de dahil) bu özelliği vardır.
  2. Dönen fonksiyon this değerini yok sayar.

İşte bunları düzelten bir örnek:

const debounce = (n: number, fn: (...params: any[]) => any, immed: boolean = false) => {
  let timer: number | undefined = undefined;
  return function (this: any, ...args: any[]) {
    if (timer === undefined && immed) {
      fn.apply(this, args);
    }
    clearTimeout(timer);
    timer = setTimeout(() => fn.apply(this, args), n);
    return timer;
  }
};

Typescript Oyun Alanı

İlgili makaleler