사용자가 텍스트 상자에 입력을 마치면 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의 답변에 대한 의견으로 방금 추가하고 싶었지만 새로운 사용자이며 평판이 충분하지 않습니다. 죄송합니다!