javascript/jquery - 向按钮添加去抖动
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8055923/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
javascript/jquery - add debounce to a button
提问by george
I want to add a debounce to a button, but i want to perform some actions each time user clicks button, but only after 5 second after user hits button, then perform SQL update. Usually the throttle seems to be applied directly to the listener. Here I want some actions performed each time the button is clicked, and then an update after a reasonable waiting period.
我想向按钮添加去抖动，但我想在每次用户单击按钮时执行一些操作，但仅在用户点击按钮后 5 秒后执行 SQL 更新。通常油门似乎直接应用于听者。在这里，我希望每次单击按钮时执行一些操作，然后在合理的等待期后进行更新。
I am not sure how to use the function in this case...
我不确定在这种情况下如何使用该功能...
reference: http://code.google.com/p/jquery-debounce/
参考：http: //code.google.com/p/jquery-debounce/
$('#myButton').click(function() {
// do a date calculation
// show user changes to screen
// wait until user has has stopped clicking the
// button for 5 seconds, then update file with "process" function.
});
function process(){
// update database table
}
debounce syntax
去抖动语法
$('input').bind('keyup blur', $.debounce(process, 5000));
回答by Felix Kling
You could still use $.debouncelike so:
你仍然可以$.debounce像这样使用：
// create new scope
(function() {
// create debounced function
var dprocess = $.debounce(process, 5000);
// bind event handler
$('#myButton').click(function() {
// do a date calculation
// show user changes to screen
// call the function
dprocess();
});
}());
Alternative without $.debounce(you can always debounce your code this way, without jQuery):
没有的替代方案$.debounce（您始终可以通过这种方式对代码进行去抖动处理，而无需使用 jQuery）：
// create new scope
(function() {
var timer;
// bind event handler
$('#myButton').click(function() {
if(timer) {
clearTimeout(timer);
}
// do a date calculation
// show user changes to screen
// call the function
timer = setTimeout(process, 5000);
});
}());
回答by Brandon Boone
Debounce using native/vanilla JS and jquery/underscore.js.
使用 native/vanilla JS 和 jquery/underscore.js 去抖动。
Example
例子
JS
JS
//Native/Vanilla JS
document.getElementById('dvClickMe').onclick = debounce(function(){
alert('clicked - native debounce');
}, 250);
function debounce(fun, mil){
var timer;
return function(){
clearTimeout(timer);
timer = setTimeout(function(){
fun();
}, mil);
};
}
//jQuery/Underscore.js
$('#dvClickMe2').click(_.debounce(function(){
alert('clicked - framework debounce');
}, 250));
HTML
HTML
<div id='dvClickMe'>Click me fast! Native</div>
<div id='dvClickMe2'>Click me fast! jQuery + Underscore</div>
回答by lukeHymansonn
var timer;
$('#myButton').click(function() {
//Called every time #myButton is clicked
if(timer) clearTimeout(timer);
timer = setTimeout(process, 5000);
});
function process(){
//Called 5000ms after #myButton was last clicked
}
回答by jzila
Why not just use setTimeOut(function() { process(); }, 5000);
为什么不直接使用 setTimeOut(function() { process(); }, 5000);
