[javascript] 사용자가 키업 대신 입력을 마치면 자바 스크립트 기능을 실행 하시겠습니까?

사용자가 텍스트 상자에 입력을 마치면 ajax 요청을 트리거하고 싶습니다. 사용자가 문자를 입력 할 때마다 많은 수의 아약스 요청이 발생하기 때문에 함수를 실행하고 싶지는 않지만 입력 버튼을 누르지 않아도됩니다.

사용자가 입력을 마친 후 감지하고 ajax 요청을 수행 할 수있는 방법이 있습니까?

여기에 jQuery를 사용하십시오! 데이브

답변

그래서, 타이핑 완료는 5 초 동안 잠시 멈추는 것을 의미한다고 생각합니다. 이를 염두에두고 사용자가 키를 놓을 때 타이머를 시작하고 키를 누르면 지 웁니다. 문제의 입력이 #myInput이 될 것이라고 결정했습니다.

몇 가지 가정 …

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example
var $input = $('#myInput');

//on keyup, start the countdown
$input.on('keyup', function () {
  clearTimeout(typingTimer);
  typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$input.on('keydown', function () {
  clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
  //do something
}

답변

위에서 선택한 답변이 작동하지 않습니다.

typingTimer는 여러 번 설정되어 있기 때문에 (빠른 타자기 등을 위해 키 다운이 트리거되기 전에 키 업을 두 번 누름) 제대로 지워지지 않습니다.

아래 솔루션은이 문제를 해결하고 OP가 요청한대로 완료된 후 X 초를 호출합니다. 또한 더 이상 중복 키 다운 기능이 필요하지 않습니다. 입력이 비어 있으면 함수 호출이 발생하지 않도록 확인을 추가했습니다.

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms (5 seconds)

//on keyup, start the countdown
$('#myInput').keyup(function(){
    clearTimeout(typingTimer);
    if ($('#myInput').val()) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

그리고 바닐라 JavaScript 솔루션의 동일한 코드 :

//setup before functions
let typingTimer;                //timer identifier
let doneTypingInterval = 5000;  //time in ms (5 seconds)
let myInput = document.getElementById('myInput');

//on keyup, start the countdown
myInput.addEventListener('keyup', () => {
    clearTimeout(typingTimer);
    if (myInput.value) {
        typingTimer = setTimeout(doneTyping, doneTypingInterval);
    }
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

이 솔루션은 ES6을 사용하지만 여기서는 필요하지 않습니다. 그냥 교체 let로 var하고 정기적 기능 화살표 기능.

답변

underscore.js debounce 함수 가있는 한 줄 입니다 .

$('#my-input-box').keyup(_.debounce(doSomething , 500));

이것은 기본적으로 입력을 중단 한 후 500 밀리 초의 doSomething을 말합니다 .

자세한 정보 : http://underscorejs.org/#debounce

답변

예, 각각의 모든 키업 이벤트에 대해 2 초의 시간 초과를 설정하여 아약스 요청을 발생시킬 수 있습니다. XHR 방법을 저장하고 후속 키 누르기 이벤트에서 중단하여 더 많은 대역폭을 절약 할 수도 있습니다. 다음은 자동 완성 스크립트를 위해 작성한 것입니다.

var timer;
var x;

$(".some-input").keyup(function () {
    if (x) { x.abort() } // If there is an existing XHR, abort it.
    clearTimeout(timer); // Clear the timer so we don't end up with dupes.
    timer = setTimeout(function() { // assign timer a new timeout 
        x = $.getJSON(...); // run ajax request and store in x variable (so we can cancel)
    }, 2000); // 2000ms delay, tweak for faster/slower
});

도움이 되었기를 바랍니다,

마르코

답변

var timer;
var timeout = 1000;

$('#in').keyup(function(){
    clearTimeout(timer);
    if ($('#in').val) {
        timer = setTimeout(function(){
            //do stuff here e.g ajax call etc....
             var v = $("#in").val();
             $("#out").html(v);
        }, timeout);
    }
});

전체 예는 다음과 같습니다. http://jsfiddle.net/ZYXp4/8/

답변

상위 2 개의 답변이 모두 효과가 없습니다. 그래서, 여기 내 해결책이 있습니다 :

var timeout = null;

$('#myInput').keyup(function() {
    clearTimeout(timeout);

    timeout = setTimeout(function() {
        //do stuff here
    }, 500);
});

답변

나는 초현실적 인 꿈의 답변을 좋아하지만 “doneTyping”기능은 모든 키를 누를 때마다 작동합니다. 입력을 중지 할 때 한 번만 발사하는 대신이 함수는 5 번 발사됩니다.

문제는 javascript setTimeout 함수가 설정된 이전 시간 초과를 덮어 쓰거나 종료하지 않는 것처럼 보이지만 직접 수행하면 작동합니다! typingTimer가 설정된 경우 setTimeout 직전에 clearTimeout 호출을 추가했습니다. 아래를보십시오 :

//setup before functions
var typingTimer;                //timer identifier
var doneTypingInterval = 5000;  //time in ms, 5 second for example

//on keyup, start the countdown
$('#myInput').on("keyup", function(){
    if (typingTimer) clearTimeout(typingTimer);                 // Clear if already set     
    typingTimer = setTimeout(doneTyping, doneTypingInterval);
});

//on keydown, clear the countdown 
$('#myInput').on("keydown", function(){
    clearTimeout(typingTimer);
});

//user is "finished typing," do something
function doneTyping () {
    //do something
}

NB 나는 이것을 Surreal Dream의 답변에 대한 의견으로 방금 추가하고 싶었지만 새로운 사용자이며 평판이 충분하지 않습니다. 죄송합니다!