將參數傳遞給函數，分配給變量

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));
    }
}