使用underscript.js"debounce"函数与typescript

Question

基本思路是防止双击.我<button>点击时使用html 来调用一个函数,这会调用ajax.<button>禁止本机行为event.preventDefault(),这意味着不应提交任何表单.另外,我正在使用TypeScript:

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 {
    ...
}

至于,我已实施_.debounce为:

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 {
    ...
}

this.ajaxCall(target)如果<button>检测到多次点击,目标是每1秒调用一次.不幸的是,函数this.ajaxCall(target)永远不会被调用 有任何想法吗？

Answer 1

这是因为你有错误的this背景ajaxCall.固定:

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

PS:为什么:https://www.youtube.com/watch？v = tvocUcbCupA&hd = 1

此外,_.debounce 还会返回您需要调用的去抖动功能.那么完整的代码:

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