javascript - typescript ile underscore.js "debounce" fonksiyonunu kullanmak

Temel fikir çift tıklamaları önlemektir. Tıklandığında bir fonksiyonu çağırmak için html <button> kullanıyorum, bu da bir ajax çağrısı yapıyor. Yerel <button> davranışı event.preventDefault() ile engelleniyor, bu da hiçbir formun gönderilmeyeceği anlamına geliyor. Ayrıca, TypeScript kullanıyorum:

private form: JQuery;
...
private getTargetAndCallAjax(): void {
    var target: string = this.form.find("form").data("target");
    this.form.find("button[type='submit']").on("click", (event)=> {
        event.preventDefault();
        this.callAjax(target);
    });
}

private callAjax(target: string): void {
    ...
}

Ben olarak, _.debounce'i şu şekilde uyguladım:

private form: JQuery;
...
private getTargetAndCallAjax(): void {
    var target: string = this.form.find("form").data("target");
    this.form.find("button[type='submit']").on("click", (event) => {
       event.preventDefault();
       var ajaxCall = function () { this.callAjax(target) };
       _.debounce(ajaxCall, 1000, true);
    });
}

private callAjax(target: string): void {
    ...
}

Amaç, birden fazla <button> tıklaması tespit edilirse her 1 saniyede bir this.ajaxCall(target) çağrısı yapmaktır. Ne yazık ki, this.ajaxCall(target) fonksiyonu hiç çağrılmıyor. Fikirleriniz var mı?

Cevap #1

Bunun nedeni, ajaxCall içinde yanlış this bağlamına sahip olmanızdır. Düzelt:

var ajaxCall = () => { this.callAjax(target) };

Not: neden: https://www.youtube.com/watch?v=tvocUcbCupA&hd=1

Ayrıca _.debounce çağrılması gereken bir debounce edilmiş fonksiyon döndürür. Yani tam kod:

   var debouncedAjaxCall = _.debounce(() => this.callAjax(target), 1000, true);
   debouncedAjaxCall();