jQuery值更改事件延迟答案

【问题标题】：jQuery value change event delayjQuery值更改事件延迟
【发布时间】：2011-05-06 21:46:14
【问题描述】：

我想在用户输入完文本框后 2 秒执行一个函数。如果他们在 1 秒后继续输入，则延迟时间将重置为 2。

它的功能应该类似于自动完成框。

我知道 2 个事件：change 和 keyup。我对change 的问题是文本框必须松开焦点才能触发它。对于keyup，如果他们用鼠标粘贴文本怎么办？

我可以在这里得到帮助吗？

【问题讨论】：

标签： jquery

【解决方案1】：

还有 HTML5 oninput 事件，目前所有主流浏览器都支持，可以在 IE 8 及更低版本中使用：

$("#myInput").bind("input", function () {
    // ...
})

http://whattheheadsaid.com/2010/09/effectively-detecting-user-input-in-javascript（解释）
http://whattheheadsaid.com/projects/input-special-event（插件）

一个非常简单的跨浏览器方法是

$("#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));
});

这会使事件在 IE 9 中触发两次（一次用于propertychange，一次用于input），但这并不重要，因为事件处理程序的性质。

【讨论】：

在你的例子中 event.type 应该是 evt.type 吗？看起来不错，我想我[可以借这个。 IE7 会触发多个属性更改，甚至是 onblur。这会抓住他们并且只处理一次吗？也是定时器的用途吗？
@armyofda12mnkeys: 不，event.type 是正确的，它正在寻找 IE 中提供的全局 event 对象。如果您想更加谨慎，可以将其更改为window.event.*。它只处理对value 属性的更改，如果它多次触发则取消之前设置的计时器。

【解决方案2】：

您可以绑定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));
});

【讨论】：

propertychange 是比keyup 更好的选择。它受 Internet Explorer 支持，并且只要用户更改输入字段的value 属性就会触发，使其与input 一样好。见我上面的回答。
select 有 change 用于此目的

【解决方案3】：

您可以同时进行更改和键入：

var globalTimeout;

$(function() {
    $("#myInput").change(initTimer).keyup(initTimer);
});

function initTimer() {
    if (globalTimeout) clearTimeout(globalTimeout);
    globalTimeout = setTimeout(handler, 2000);
}

function handler() {
    ...
}

【讨论】：

【解决方案4】：

我会这样做：

$("selector").keyup(function(){
   if(typeof(window.delayer) != 'undefined')
      clearTimeout(window.delayer);
   window.delayer = setTimeout(function_you_want_to_get_execute_with_delay, 2000);
});

干杯

【讨论】：

【解决方案5】：

keyup 可以工作：

$("#s").keyup(function(e){
    $("#t").html($(this).val());
});

Jsfiddle：http://jsfiddle.net/3nx6t/

【讨论】：

keyup 是检测用户输入的不良事件。它仅在用户将手指从键上移开时触发，并且仅在键盘输入时触发（无粘贴、拖放、拼写检查更正等）。
@Andy：请看演示。 jQuery 1.6 也支持粘贴！
@kingjiv 和 @Andy，我的错，是的，它不适用于鼠标交互，但是如果我们绑定 input 事件，我们可以这样做，就像 @Andy 所做的那样。