在 jQuery 中延迟按键之间的操作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2410937/
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
delaying actions between keypress in jQuery
提问by Sinan
How can I delay actions between keypress in jQuery. For example;
如何延迟 jQuery 中按键之间的操作。例如;
I have something like this
我有这样的事情
if($(this).val().length > 1){
$.post("stuff.php", {nStr: "" + $(this).val() + ""}, function(data){
if(data.length > 0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}else{
$('#suggestions').hide();
}
});
}
I want to prevent posting data if the user continously typing. So how can I give .5 seconds delay?
如果用户连续打字，我想阻止发布数据。那么我怎样才能延迟 0.5 秒呢？
回答by Nick Craver
You can use jQuery's data abilities to do this, something like this:
您可以使用 jQuery 的数据功能来执行此操作，如下所示：
$('#mySearch').keyup(function() {
clearTimeout($.data(this, 'timer'));
var wait = setTimeout(search, 500);
$(this).data('timer', wait);
});
function search() {
$.post("stuff.php", {nStr: "" + $('#mySearch').val() + ""}, function(data){
if(data.length > 0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}else{
$('#suggestions').hide();
}
});
}
The main advantage here is no global variables all over the place, and you could wrap this in an anonymous function in the setTimeout if you wanted, just trying to make the example as clean as possible.
这里的主要优点是没有全局变量，如果需要，您可以将其包装在 setTimeout 中的匿名函数中，只是试图使示例尽可能干净。
回答by jvenema
All you need to do is wrap your function in a timeout that gets reset when the user presses a key:
你需要做的就是将你的函数包装在一个超时中，当用户按下一个键时它会被重置：
var ref;
var myfunc = function(){
ref = null;
//your code goes here
};
var wrapper = function(){
window.clearTimeout(ref);
ref = window.setTimeout(myfunc, 500);
}
Then simply invoke "wrapper" in your key event.
然后只需在您的关键事件中调用“包装器”。
回答by PetersenDidIt
There is a nice plugin to handle this. jQuery Throttle / Debounce
有一个很好的插件来处理这个问题。 jQuery 节流/去抖
回答by Huy Le
Nick's answer is perfect but if handling first event immediately is critical then I think we can do:
尼克的回答是完美的，但如果立即处理第一个事件至关重要，那么我认为我们可以这样做：
$(selector).keyup(function(e){ //or another event
if($(this).val().length > 1){
if !($.data(this, 'bouncing-locked')) {
$.data(this, 'bouncing-locked', true)
$.post("stuff.php", {nStr: "" + $(this).val() + ""}, function(data){
if(data.length > 0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}else{
$('#suggestions').hide();
}
});
self = this
setTimeout(function() {
$.data(self, 'bouncing-locked', false);
//in case the last event matters, be sure not to miss it
$(this).trigger("keyup"); // call again the source event
}, 500)
}
}
});
回答by thaBadDawg
I'd wrap it in a function like so:
我会把它包装在一个像这样的函数中：
var needsDelay = false;
function getSuggestions(var search)
{
if(!needsDelay)
{
needsDelay = true;
setTimeout("needsDelay = false", 500);
if($(this).val().length > 1){
$.post("stuff.php", {nStr: "" + search + ""}, function(data){
if(data.length > 0) {
$('#suggestions').show();
$('#autoSuggestionsList').html(data);
}else{
$('#suggestions').hide();
}
});
}
}
}
That way no matter how many times you ping this, you will never search more than every 500 milliseconds.
这样，无论您 ping 多少次，您的搜索次数都不会超过每 500 毫秒。
