Question

基本思路是防止双击。我点击时使用html <button>来调用函数，这会调用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)次点击，目标是每1秒拨打一次<button>。不幸的是，函数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();

使用underscript.js“debounce”函数与typescript

1 个答案: