jQuery中的去抖动功能

Posted 2023-02-22

【中文标题】jQuery中的去抖动功能

【英文标题】：Debounce function in jQuery

【发布时间】：2015-03-03 11:27:05

【问题描述】：

我正在尝试使用 Ben Alman 的 jquery 去抖动库来去抖动按钮的输入。 http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/

目前这是我拥有的代码。

function foo() 
    console.log("It works!")
;

$(".my-btn").click(function() 
    $.debounce(250, foo);
);

问题是当我单击按钮时，该函数永远不会执行。我不确定我是否误解了某些东西，但据我所知，我的代码与示例相符。

【问题讨论】：

这是一个非常小的插件，但你为什么需要它，特别是对于一个很容易解除绑定和重新绑定的事件处理程序 -> jsfiddle.net/pgabaeju

你如何强制一个jQuery插件的消费者安装另一个插件？这应该是核心 API 的一部分。如果油门不是去抖动，也是你的 jsfiddle 示例。

这是什么版本的jquery？

【参考方案1】：

在我的例子中，我需要对不是由 jQuery 事件处理程序直接生成的函数调用进行去抖动处理，而 $.debounce() 返回一个函数的事实使其无法使用，因此我编写了一个名为 @ 的简单函数987654321@ 与 Debounce 做同样的事情，但可以在任何地方使用。

您可以通过简单地使用callOnce() 来包装函数调用来使用它，例如callOnce(functionThatIsCalledFrequently); 或 callOnce(function() doSomething();

/**
 * calls the function func once within the within time window.
 * this is a debounce function which actually calls the func as
 * opposed to returning a function that would call func.
 * 
 * @param func    the function to call
 * @param within  the time window in milliseconds, defaults to 300
 * @param timerId an optional key, defaults to func
 */
function callOnce(func, within=300, timerId=null)
    window.callOnceTimers = window.callOnceTimers || ;
    if (timerId == null) 
        timerId = func;
    var timer = window.callOnceTimers[timerId];
    clearTimeout(timer);
    timer = setTimeout(() => func(), within);
    window.callOnceTimers[timerId] = timer;

【参考方案2】：

我遇到了同样的问题。问题正在发生，因为 debounce 函数返回了一个没有在任何地方调用的新函数。

要解决此问题，您必须将去抖动函数作为参数传递给 jquery click 事件。这是您应该拥有的代码。

$(".my-btn").click($.debounce(250, function(e) 
    console.log("It works!");
));

【讨论】：

当然是$(".my-btn").click($.debounce(250, foo))。

这是什么版本的jquery？