雷米夏普的功能调节器

时间:2011-10-18 08:19:59

标签: javascript javascript-events closures jquery

尝试使用由Remy Sharp创建的限制功能(http://remysharp.com/2010/07/21/throttling-function-calls/)...它的标准用法如下:

$('.thing').click(throttle(function() { 
   console.log('api call'); 
}, 300);

这是非常整洁,但我希望能够在函数内限制代码的特定部分,而不是整个点击事件,如下所示:

$('.thing').click(function() { 
    console.log('hello!'); 

    throttle(function() { 
        console.log('api call'); 
    }, 300); 

});

但我不太明白为什么它不起作用。节流代码返回一个函数,所以如果我用.apply(this, arguments);进行节流调用,然后键入'hello',该函数被调用5次而不是一次,因为节流函数中的计时器没有被覆盖。

通过jQuery点击代码进行筛选但无法找到任何内容。我猜jQuery创建了它的一个实例,然后回忆相同的实例,所以同样的计时器在那里?

有没有人理解这个以及为什么会这样?

谢谢,Dom

3 个答案:

答案 0 :(得分:1)

你做错了; - )

以下是jsbin的解决方案:http://jsbin.com/elabul/edit

throttle方法返回一个函数,该函数将限制它被调用的次数。所以你需要在变量中捕获那个坏男孩并从你的点击处理程序中调用它,如下所示:

var inputThrottle = throttle(function () {
  console.log('api call');
}, 250);


$('input').keyup(function () {
   console.log('test');
   inputThrottle();
});

答案 1 :(得分:0)

只是调用throttle什么都不做,你需要将函数作为函数返回到click处理程序:

$('.thing').click((function() { 
    console.log('hello!'); 

    return throttle(function() { 
        console.log('api call'); 
    }, 300); 

}()));

答案 2 :(得分:0)

你需要从油门功能调用返回:

$('.thing').click(function() { 
    console.log('hello!'); 

    (throttle(function() { 
        console.log('api call'); 
    }, 500))(); 

});