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);
});
问题是当我单击按钮时,该函数永远不会执行。我不确定我是否误解了某些内容,但据我所知,我的代码与示例匹配。
我遇到了同样的问题。出现问题是因为去抖动函数返回一个未在任何地方调用的新函数。
要解决此问题,您必须将去抖动函数作为参数传递给 jquery 单击事件。这是您应该拥有的代码。
$(".my-btn").click($.debounce(250, function(e) {
console.log("It works!");
}));
就我而言,我需要去反弹一个不是由 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;
}
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 将函数的上下文应用于javascript变量
- 如何在JavaScript中将字符串转换为函数引用
- 用嵌套函数和默认函数定义函数
- 使用 jQuery 的 .on 函数如何获取事件的原始元素
- 无法导出函数expressjs/requestjs中的变量
- 函数参数中的数据与指定变量之间的任何性能差异
- JQuery合并了keyup和focusout两个函数
- ES6构造函数返回基类的实例
- 监视函数从服务返回不起作用,但作用域函数起作用
- 我可以在json对象中添加一个函数吗
- AngularJS:我可以跳过函数参数回调吗
- 如何使jQuery插件函数可调用以供独立使用,而不在集合上操作
- JavaScript数组排序(函数)用于对表行进行排序,而不是排序
- jquery点击函数select&取消选择
- 拨打'父亲'函数形式a'儿童'ReactJS中的组件
- Node.js v6.2.0类扩展不是函数错误
- 比较从函数和生成的日期对象
- Javascript:如何调整我的去抖动函数以采用 IF 条件
- jQuery中的去抖动函数