사용자가 타이핑을 일시 중지 할 때까지 지연되는 onkeyup 이벤트를 트리거하는 방법은 무엇입니까?

Question

사람들이 텍스트 (자연스럽게)를 입력하는 텍스트 영역이 있습니다. 그리고 AJAX 요청이 매번 만들어지기를 원하고 스택 영역 오버플로와 같은 텍스트 영역에 관한 제안을 얻으려고합니다. 텍스트 입력이 아닌 텍스트 영역). 문제는 모든 키 누르기에서 AJAX 요청을 할 수 없다는 것입니다 (쓸모없고 자원 소모적 일 것입니다). 그리고 가장 효율적인 방법은 무엇이 될지 모르겠습니다 (모든 X 단어? 매 X 초 ? 또는 다른 것?).

이 작업을 수행하는 가장 좋은 방법은 무엇입니까?

미리 감사드립니다.

Answer 1

keypress 이벤트 핸들러를 setTimeout과 결합하여 키 누르기 후에 설정된 시간 동안 Ajax 요청을 보내고 타이머가 완료되기 전에 다른 키 누르기가 발생하면 타이머를 취소하고 다시 시작할 수 있습니다. 당신은 ID '를 myTextArea'와 doAjaxStuff라고 아약스 콜백 함수와 텍스트 영역은 한 가정 :

function addTextAreaCallback(textArea, callback, delay) { 
    var timer = null; 
    textArea.onkeypress = function() { 
     if (timer) { 
      window.clearTimeout(timer); 
     } 
     timer = window.setTimeout(function() { 
      timer = null; 
      callback(); 
     }, delay); 
    }; 
    textArea = null; 
} 

addTextAreaCallback(document.getElementById("myTextArea"), doAjaxStuff, 1000); 

Answer 2

jQuery 솔루션에 관심이 있으시면 jQuery Suggest을 구현하는 것이 좋습니다.

매번 바퀴를 다시 발명하지 않습니다.

Answer 3

개인적으로 변경을 위해 텍스트 영역을 모니터하고 변경이 감지되면 AJAX 콜백 만 수행하는 setInterval을 사용합니다. 매 초마다 빠르며 느려야합니다.

Answer 4

또 다른 대안이 bindWithDelay라는 작은 jQuery 플러그인을 사용하는 것입니다. 허용 된 응답과 동일한 setTimeout 기술을 사용하지만 타임 아웃을 투명하게 처리하므로 코드를 조금 더 읽기 쉽습니다. source code은 github에서 볼 수 있습니다.

$("#myTextArea").bindWithDelay("keypress", doAjaxStuff, 1000) 

Answer 5

당신이 사이트의 주위에이 기능을 많이 사용하고 난 here 사용할 수있는 플러그인에이를 패키지로의 setTimeout 심판 등의 모든 추적하지 않으려면.

플러그인은 이전 ajax 호출을 버퍼링하고 취소하기위한 일반 $ .ajax 메소드에 몇 가지 옵션을 추가합니다.

Answer 6

underscore.js를 사용하는 경우 debounce function을 사용할 수 있습니다.

예 (jQuery를이의 keyup에 사용) : debouncing를

$('#myTextArea').keyup(_.debounce(function(){ 
    alert('hello'); 
}, 500)); 

Answer 7

라고 당신은 무엇을 찾고 있습니다. onkeyup 이벤트와 함께 사용하는 방법의 예 여기

function debounce(fn, duration) { 
    var timer; 
    return function() { 
    clearTimeout(timer); 
    timer = setTimeout(fn, duration) 
    } 
} 

을 그리고 : jQuery를 .keyup [의

function debounce(fn, duration) { 
 
    var timer; 
 
    return function(){ 
 
    clearTimeout(timer); 
 
    timer = setTimeout(fn, duration); 
 
    } 
 
} 
 

 
$(function(){ 
 
    
 
    $('#txtSearch').on('keyup', debounce(function(){ 
 
    
 
    alert('You paused your typing!'); 
 
    
 
    }, 500)); 
 
    
 
});

input{ 
 
    padding:.5em; 
 
    font-size:16px; 
 
    width:20em; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input id="txtSearch" placeholder="Type here" />