jQuery 值更改事件延迟
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5917344/
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
jQuery value change event delay
提问by Shawn Mclean
I want to execute a function like 2 seconds after a user has finished typing in the textbox. If they continue to type after 1 second, the delay time is reset back to 2.
我想在用户完成输入文本框后 2 秒执行一个函数。如果他们在 1 秒后继续输入，则延迟时间将重置为 2。
It should function something similar to an autocomplete box.
它的功能应该类似于自动完成框。
I know of 2 events: changeand keyup. The problem I have with changeis that the textbox has to loose focus for it to be triggered. for keyup, what if they use the mouse to paste a text?
我知道 2 个事件：change和keyup. 我change遇到的问题是文本框必须失去焦点才能触发它。对于keyup，如果他们使用鼠标粘贴文本怎么办？
Could I be helped here?
我可以在这里得到帮助吗？
回答by Andy E
There's the HTML5 oninputevent, supported by all the current major browsers and can be worked into IE 8 and lower:
目前oninput所有主流浏览器都支持HTML5事件，并且可以在 IE 8 及更低版本中使用：
$("#myInput").bind("input", function () {
// ...
})
- http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript(explanation)
- http://whattheheadsaid.com/projects/input-special-event(plugin)
- http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript（说明）
- http://whattheheadsaid.com/projects/input-special-event（插件）
A very simple cross browser approach would be
一个非常简单的跨浏览器方法是
$("#myInput").bind("input propertychange", function (evt) {
// If it's the propertychange event, make sure it's the value that changed.
if (window.event && event.type == "propertychange" && event.propertyName != "value")
return;
// Clear any previously set timer before setting a fresh one
window.clearTimeout($(this).data("timeout"));
$(this).data("timeout", setTimeout(function () {
// Do your thing here
}, 2000));
});
This would make the event fire twice in IE 9 (one for propertychange, one for input), but it doesn't matter because of the nature of the event handler.
这将使事件在 IE 9 中触发两次（一次为propertychange，一次为input），但由于事件处理程序的性质，这无关紧要。
回答by DarthJDG
You can bind the inputevent and also keyupfor fallback on older browsers. You can then start a timer, which gets reset every time a user action is detected. By saving the timer handle in the current element's data makes sure multiple elements don't interfere with each other.
您可以绑定input事件，也keyup可以在旧浏览器上进行回退。然后，您可以启动一个计时器，它会在每次检测到用户操作时重置。通过在当前元素的数据中保存计时器句柄，确保多个元素不会相互干扰。
$('input').bind('input keyup', function(){
var $this = $(this);
var delay = 2000; // 2 seconds delay after last input
clearTimeout($this.data('timer'));
$this.data('timer', setTimeout(function(){
$this.removeData('timer');
// Do your stuff after 2 seconds of last user input
}, delay));
});
回答by ariel
You can put on both change and keyup:
您可以同时使用 change 和 keyup：
var globalTimeout;
$(function() {
$("#myInput").change(initTimer).keyup(initTimer);
});
function initTimer() {
if (globalTimeout) clearTimeout(globalTimeout);
globalTimeout = setTimeout(handler, 2000);
}
function handler() {
...
}
回答by Naveed Ahmad
keyupwill work:
keyup将工作：
$("#s").keyup(function(e){
$("#t").html($(this).val());
});
Jsfiddle: http://jsfiddle.net/3nx6t/
jsfiddle：http: //jsfiddle.net/3nx6t/
回答by Edgar Villegas Alvarado
I'd do it like this:
我会这样做：
$("selector").keyup(function(){
if(typeof(window.delayer) != 'undefined')
clearTimeout(window.delayer);
window.delayer = setTimeout(function_you_want_to_get_execute_with_delay, 2000);
});
Cheers
干杯
