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)); 
});