当用户完成输入而不是按键时运行javascript函数？

Question

我想在用户输入完文本框后触发 ajax 请求。我不希望它在每次用户输入字母时都运行该函数，因为这会导致大量的 ajax 请求，但是我也不希望他们必须点击 enter 按钮。

有没有办法让我可以检测到用户何时完成输入然后执行 ajax 请求？

在这里使用 jQuery！

原文由 David Zorychta 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

所以，我猜想完成打字意味着你只是停下来一会儿，比如 5 秒。因此，考虑到这一点，让我们在用户释放一个键时启动一个计时器，并在他们按下一个键时清除它。我决定有问题的输入将是#myInput。

做几个假设…

 //setup before functions
 var typingTimer; //timer identifier
 var doneTypingInterval = 5000; //time in ms, 5 seconds 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
 }

原文由 Surreal Dreams 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

上面选择的答案不起作用。

因为 typingTimer 偶尔会设置多次（在触发 keydown 之前为快速打字机等按下 keyup 两次）所以它不能正确清除。

下面的解决方案解决了这个问题，并将在 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 并将箭头函数替换为常规函数。

原文由 going 发布，翻译遵循 CC BY-SA 4.0 许可协议