当用户在文本框中输入完成时，我想触发一个ajax请求。我不希望它在每次用户键入一封信时运行该函数，因为这会导致大量的ajax请求，但我也不希望他们不得不按回车键。
是否有一种方法，让我可以检测当用户已经完成输入，然后做ajax请求?
在这里使用jQuery !
当前回答
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/
其他回答
你们听说过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);
})
一旦你检测到文本框的焦点，在键上做一个超时检查，并重置它每次触发。
当超时结束时，执行ajax请求。
我觉得解决方案有点简单的输入事件:
var typingTimer;
var doneTypingInterval = 500;
$("#myInput").on("input", function () {
window.clearTimeout(typingTimer);
typingTimer = window.setTimeout(doneTyping, doneTypingInterval);
});
function doneTyping () {
// code here
}
我需要为特定的控制运行我的程序，这对我来说很有效:
function debounce(func, timeout) {
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
}
$('#txtFilterClientCode').keyup(debounce(function () {
console.log("Test");
}, 1000));
不是一个直接的答案，但如果有人在寻找AngularJS的解决方案。我根据这里流行的解决方案写了一个指令。
app.directive("ngTypeEnds", ["$timeout", function ($timeout) {
return function (scope, element, attrs) {
var typingTimer;
element.bind("keyup", function (event) {
if (typingTimer)
$timeout.cancel(typingTimer);
if (angular.element(element)[0].value) {
typingTimer = $timeout(function () {
scope.$apply(function () {
scope.$eval(attrs.ngTypeEnds);
});
}, 500);
}
event.preventDefault();
});
};
}]);
