javascript - 是否可以创建一个可以将另一个函数(也有参数)作为参数的 throttle 函数，以及时间延迟

Question

所以我已经编写了一个函数，该函数适用于不接受参数的函数(基于下划线限制)，但我想让它足够通用以传递一个可变数量的函数参数。这是我拥有的:

    (function () {

    var lastTime = new Date().getTime();

    function foo() {
        var newTime = new Date().getTime();
        var gap = newTime - lastTime; // Travels up scope chain to use parents lastTime.  Function has access to variables declared in the same scope
        console.log('foo called,  gap:' + gap);
        lastTime = newTime; // Updates lastTime
        //console.log(x);
        //x++;
    }

    var throttle = function(func, wait) {
        var result;
        var timeout = null; // flag updated through closure
        var previous = 0; // time last run updated through closure

        return function() { //func, wait, timeout, previous available through scope
            var now = new Date().getTime();
            var remaining = wait - (now - previous);

            if (remaining <= 0) {
                clearTimeout(timeout);
                timeout = null;
                previous = now;
                result = func.apply(this, arguments); //func is available through closure
            }
            return result;
        };
    };

    document.addEventListener("scroll", throttle(foo, 1000));
    //document.addEventListener("scroll", throttle(foo(5), 2000));

}());

但我想将 foo 修改为 foo(x) 并让它工作

    (function () {

    var lastTime = new Date().getTime();

    function foo(x) {
        var newTime = new Date().getTime();
        var gap = newTime - lastTime; // Travels up scope chain to use parents lastTime.  Function has access to variables declared in the same scope
        console.log('foo called,  gap:' + gap);
        lastTime = newTime; // Updates lastTime
        console.log(x);
        x++;
    }

    var throttle = function(func, wait) {
        var result;
        var timeout = null; // flag updated through closure
        var previous = 0; // time last run updated through closure

        return function() { //func, wait, timeout, previous available through scope
            var now = new Date().getTime();
            var remaining = wait - (now - previous);

            if (remaining <= 0) {
                clearTimeout(timeout);
                timeout = null;
                previous = now;
                result = func.apply(this, arguments); //func is available through closure
            }
            return result;
        };
    };

    document.addEventListener("scroll", throttle(foo(5), 2000));

}());

Answer 1

throttle (foo(5), 2000)

将不起作用，因为当您使用括号调用函数时，您正在调用该函数。

将 foo 传递给 throttle 时，您需要将其包装在匿名函数中。

throttle(function(){
    foo(5)
}, 2000)

如果您想跟踪 x 的原始值。将 foo 包装在一个函数中并返回 foo。将值捕获在闭包范围内。

function foo(x) {
  return function(){
    var newTime = new Date().getTime();
    var gap = newTime - lastTime; // Travels up scope chain to use parents lastTime.  Function has access to variables declared in the same scope
    console.log('foo called,  gap:' + gap);
    lastTime = newTime; // Updates lastTime
    console.log(x);
    x++;
  }        
}

然后你实际上可以使用 throttle(foo(5), 2000) 因为它不会在第一次调用时执行预期的功能。

此处示例:http://repl.it/XOj/5 (固定示例)

接受任意数量的参数，修改 throttle 的解决方案:

function throttle(func, wait, args){
    //do throttle stuff 
    func.apply(null, args);
}

然后 throttle(foo(5), 2000) 变成 throttle(foo, 2000, [5])