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