Remy Sharp's功能节流器

Remy Sharp's function throttler

本文关键字：功能 Sharp Remy      更新时间：2023-09-26

试图使用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创建了它的一个实例然后调用相同的实例所以有相同的计时器吗?

有人明白这一点吗?为什么会这样?

你做错了;-)

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

throttle方法返回一个函数，该函数将限制调用它的次数。因此，您需要在一个变量中捕获这个坏小子，并在单击处理程序中调用它，如下所示:

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

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

您需要调用从油门函数返回:

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

只是调用throttle不做任何事情，您需要将函数作为函数返回给单击处理程序:

$('.thing').click((function() { 
    console.log('hello!'); 
    return throttle(function() { 
        console.log('api call'); 
    }, 300); 
}()));
相关文章：