是否可以创建一个可以将另一个函数（也有参数）作为参数的节流函数，以及时间延迟

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(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（固定示例）

采用任意数量的参数的解决方案，修改油门：

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

那么throttle(foo(5), 2000)变成throttle(foo, 2000, [5])