jQuery值更改事件延迟

Question

我想在用户键入文本框后执行一个类似于2秒的功能。如果他们在1秒后继续键入，则延迟时间将重置为2.

它应该功能类似于自动填充框。

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

我可以帮忙吗？

Answer 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）的两倍，但它并没有因为事件处理程序的本质关系。

Answer 2

你可以把两者变化和KEYUP：

var globalTimeout; 

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

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

function handler() { 
    ... 
} 

Answer 3

keyup将工作：

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

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

Answer 4

我会做这样的：

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

干杯

Answer 5

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