Question

我正在尝试对部分代码进行反跳处理，为此，我使用以下功能：

private debounce(func, wait, immediate) {
    var timeout;
    return function () {
        var context = this, args = arguments;
        var later = function () {
            timeout = null;
            if (!immediate) func.apply(context, args);
        };
        var callNow = immediate && !timeout;
        clearTimeout(timeout);
        timeout = setTimeout(later, wait);
        if (callNow) func.apply(context, args);
    };
};

然后，为了使用它，我这样做：

var showDataOnMove = this.debounce(function (evt) {
     console.log('moving');
 }, 500, false);

当我在这段代码中调用它时，它按照预期的方式工作：

this._map.on('pointermove', (evt) => {
    showDataOnMove();
});

但是，我意识到，我不知道如何将任何参数传递给已去抖动的函数，将其附加到变量时（例如，我想将此evt传递给showDataOnMove（）），我尝试了不同的方法，像这样一个：

var showDataOnMove = (evt) => this.debounce(function (evt) {
    console.log('moving');
    console.log(evt);
}, 500, false);

但是效果不佳。我如何向该函数传递参数？

Answer 1

最简单的方法可能是创建一个闭包。您已经执行了此操作，但是随后您重新声明了捕获的变量并因此中断了它。看起来应该是这样：

// Function in debounce has no argument
var showDataOnMove = evt => {
    this.debounce(() => {
        console.log('moving');
        console.log(evt);
    }, 500, false)(); // Call the function returned by debounce
};

您分配showDataOnMove的初始版本应该可以正常工作，这是一个更好类型的示例，其中debouce返回与作为参数传递的函数类型相同的函数：

class DebounceExample
{
    private debounce<T extends (...args: any[]) => void>(func: T, wait: number, immediate: boolean): T
    {
        // Depending on environment (e.g. Node or browser) this should be typed differently
        var timeout: any;

        return function (this: any, ...args)
        {
            var context = this;
            var later = function ()
            {
                timeout = undefined;
                if (!immediate) func.apply(context, args);
            };
            var callNow = immediate && !timeout;
            clearTimeout(timeout);
            timeout = setTimeout(later, wait);

            if (callNow)
                func.apply(context, args);
        } as T;
    };

    constructor()
    {
        // Example usage
        var showDataOnMove = this.debounce(function (evt: number) {
            console.log(evt);
        }, 500, false);

        setTimeout(() => showDataOnMove(1));
        setTimeout(() => showDataOnMove(2));
        setTimeout(() => showDataOnMove(3));
    }
}

将参数传递给函数，并分配给变量

1 个答案: