当用户在文本框中输入完成时，我想触发一个ajax请求。我不希望它在每次用户键入一封信时运行该函数，因为这会导致大量的ajax请求，但我也不希望他们不得不按回车键。
是否有一种方法，让我可以检测当用户已经完成输入，然后做ajax请求?
在这里使用jQuery !
当前回答
很晚的答案，但我添加它是因为现在是2019年，这完全可以用漂亮的ES6实现，没有第三方库，而且我发现大多数高评分的答案都很笨重，有太多变量。
优雅的解决方案从这篇优秀的博客文章。
function debounce(callback, wait) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(function () { callback.apply(this, args); }, wait);
};
}
window.addEventListener('keyup', debounce( () => {
// code you would like to run 1000ms after the keyup event has stopped firing
// further keyup events reset the timer, as expected
}, 1000))
其他回答
用于将参数与ES6语法一起传递给函数。
$(document).ready(() => {
let timer = null;
$('.classSelector').keydown(() => {
clearTimeout(timer);
timer = setTimeout(() => foo('params'), 500);
});
});
const foo = (params) => {
console.log(`In foo ${params}`);
}
我喜欢Surreal Dream的答案，但我发现我的“doneTyping”函数会在每次按键时触发，即如果你快速输入“Hello”;当您停止输入时，该函数将触发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
}
注意:我本来想把这句话作为对Surreal Dream的回答的评论，但我是一个新用户，没有足够的声誉。对不起!
你可以使用onblur事件来检测文本框何时失去焦点: https://developer.mozilla.org/en/DOM/element.onblur
这与“停止输入”不一样，如果你关心用户输入了一堆东西，然后坐在那里，文本框仍然聚焦。
为此，我建议将setTimeout绑定到onclick事件，并假设在x段时间内没有击键，用户已经停止输入。
我只是想出了一个简单的代码，等待用户完成输入:
步骤1。将超时设置为空，然后在用户输入时清除当前超时。
步骤2。触发keyup事件之前定义的变量的清除超时。
步骤3.为上面声明的变量定义timeout;
<input type="text" id="input" placeholder="please type" style="padding-left:20px;"/>
<div class="data"></div>
javascript代码
var textInput = document.getElementById('input');
var textdata = document.querySelector('.data');
// Init a timeout variable to be used below
var timefired = null;
// Listen for keystroke events
// Init a timeout variable to be used below
var timefired = null;// Listen for keystroke events
textInput.onkeyup = function (event) {
clearTimeout(timefired);
timefired = setTimeout(function () {
textdata.innerHTML = 'Input Value:'+ textInput.value;
}, 600);
};
嗯，严格来说不是，因为计算机无法猜测用户何时完成输入。当然，你可以在按下键时触发计时器，并在每次按下键时重置它。如果计时器过期，用户在计时器持续时间内还没有输入-你可以称之为“完成输入”。
如果您希望用户在输入时暂停，则无法知道他们何时完成。
(当然，除非你能从数据中判断他们何时完成)
