当用户在文本框中输入完成时，我想触发一个ajax请求。我不希望它在每次用户键入一封信时运行该函数，因为这会导致大量的ajax请求，但我也不希望他们不得不按回车键。
是否有一种方法，让我可以检测当用户已经完成输入，然后做ajax请求?
在这里使用jQuery !
当前回答
同意@going的答案。下面是另一个类似的解决方案。唯一的区别是我使用的是.on("input"…)而不是keyup。这只捕获输入中的更改。其他按键如Ctrl, Shift等被忽略
var typingTimer; //timer identifier
var doneTypingInterval = 5000; //time in ms (5 seconds)
//on input change, start the countdown
$('#myInput').on("input", function() {
clearTimeout(typingTimer);
typingTimer = setTimeout(function(){
// doSomething...
}, doneTypingInterval);
});
其他回答
很晚的答案，但我添加它是因为现在是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))
你们听说过javascript中的闭包吗?!
它非常简单直接，只需将当前输入值与setTimeOut函数关闭的旧值进行比较，瞧，你就完成了。
let timer;
$('#myInput').on('keyup', function() {
window.clearTimeout(timer);
// here is the closures javascript magic happens.
const value = $(this).val();
timer = setTimeout(() => {
if(value === $(this).val() && $(this).val()!== ''){
alert($(this).val());
}
}, 500);
})
如果你需要等待，直到用户完成输入使用简单的这个:
$(document).on('change','#PageSize', function () {
//Do something after new value in #PageSize
});
使用ajax调用的完整示例-这适用于我的寻呼机-每个列表的项目计数:
$(document).ready(function () {
$(document).on('change','#PageSize', function (e) {
e.preventDefault();
var page = 1;
var pagesize = $("#PageSize").val();
var q = $("#q").val();
$.ajax({
url: '@Url.Action("IndexAjax", "Materials", new { Area = "TenantManage" })',
data: { q: q, pagesize: pagesize, page: page },
type: 'post',
datatype: "json",
success: function (data) {
$('#tablecontainer').html(data);
// toastr.success('Pager has been changed', "Success!");
},
error: function (jqXHR, exception) {
ShowErrorMessage(jqXHR, exception);
}
});
});
});
const inText = document.getElementById('inText') const outText = document.getElementById('outText') Const delay = 1000 让计时器 inText。addEventListener('input'， code => { clearTimeout(计时器); timer = setTimeout(x => { outText。innerHTML = inText.value }，延迟，代码) }) <textarea id='inText'>编辑这个和 <pre id='outText'>在你停止输入一秒钟后看到结果</pre>
我喜欢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的回答的评论，但我是一个新用户，没有足够的声誉。对不起!
