jQuery 中的去抖功能
Debounce function in jQuery
我正在尝试使用 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);
});
问题是当我点击按钮时,该功能从未执行。我不确定我是否误解了什么,但据我所知,我的代码与示例相符。
我运行遇到了同样的问题。出现问题是因为去抖动函数 returns 一个没有在任何地方调用的新函数。
要解决此问题,您必须将去抖功能作为参数传递给 jquery 单击事件。这是您应该拥有的代码。
$(".my-btn").click($.debounce(250, function(e) {
console.log("It works!");
}));
在我的例子中,我需要对不是由 jQuery 事件处理程序直接生成的函数调用进行去抖动,而 $.debounce() returns 一个函数使得它不可能使用,所以我写了一个名为 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;
}
我正在尝试使用 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);
});
问题是当我点击按钮时,该功能从未执行。我不确定我是否误解了什么,但据我所知,我的代码与示例相符。
我运行遇到了同样的问题。出现问题是因为去抖动函数 returns 一个没有在任何地方调用的新函数。
要解决此问题,您必须将去抖功能作为参数传递给 jquery 单击事件。这是您应该拥有的代码。
$(".my-btn").click($.debounce(250, function(e) {
console.log("It works!");
}));
在我的例子中,我需要对不是由 jQuery 事件处理程序直接生成的函数调用进行去抖动,而 $.debounce() returns 一个函数使得它不可能使用,所以我写了一个名为 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;
}