jQuery 中的去抖函数

Question

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

目前这是我拥有的代码。

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

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

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

Answer 1

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

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

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-throttle-debounce/1.1/jquery.ba-throttle-debounce.min.js"></script>
<button class="my-btn">Click me!</button>

Answer 2

在我的例子中，我需要对不是由 jQuery 事件处理程序直接生成的函数调用进行反跳，而 $.debounce() 返回一个函数的事实使其无法使用，所以我编写了一个名为

callOnce()

的简单函数其作用与 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;
}