对于alpine.js用户<input @input.debounce.500ms="fn()" >

上面选择的答案不成立。

因为typingTimer偶尔会设置多次(对于快速键入者，按下键之前按下键两次)，那么它就不能正确清除。

下面的解决方案解决了这个问题，并将在完成OP请求后调用X秒。它也不再需要冗余的keydown函数。我还添加了一个检查，这样如果输入为空，函数调用就不会发生。

//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，将箭头函数替换为常规函数。

它只是一行下划线。js debounce函数:

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

这基本上是在我停止输入500毫秒后做某事。

欲了解更多信息:http://underscorejs.org/#debounce

我觉得解决方案有点简单的输入事件:

var typingTimer;
var doneTypingInterval = 500;

$("#myInput").on("input", function () {
    window.clearTimeout(typingTimer);
    typingTimer = window.setTimeout(doneTyping, doneTypingInterval);
});

function doneTyping () {
    // code here
}

你可以使用onblur事件来检测文本框何时失去焦点: https://developer.mozilla.org/en/DOM/element.onblur

这与“停止输入”不一样，如果你关心用户输入了一堆东西，然后坐在那里，文本框仍然聚焦。

为此，我建议将setTimeout绑定到onclick事件，并假设在x段时间内没有击键，用户已经停止输入。

一旦你检测到文本框的焦点，在键上做一个超时检查，并重置它每次触发。

当超时结束时，执行ajax请求。