如何在用户完成输入后几秒钟内启动 ajax 功能[重复]答案

【问题标题】：How can I start ajax function seconds after the user finishes typing [duplicate]如何在用户完成输入后几秒钟内启动 ajax 功能[重复]
【发布时间】：2017-05-11 08:46:55
【问题描述】：

晚安，我想知道是否可以在下面的代码中将这个函数插入到 ajax 中。我只想在用户完成输入 2 秒后提交搜索，替换“onkeyup”。

PS：这是用于 Ajax 实时搜索的。

function pesquisar(value) {
$("#results").show();
$.ajax({
    type:'post', 
    url:'/classes/searchfetch.php', 
    data: {s:value},    
    success: function (data){
        $("#results").html(data);
    },
}); };

如果你能帮助我，我将不胜感激。

【问题讨论】：

如果用户因某种原因停止输入超过 2 秒，然后又想重新开始输入会怎样？
您可以使用 setTimeout 和 clearTimeout 来停止/启动计时器 onKeyUp。
仅供参考，其中一个关键字称为debounce，以防您以后想查找更多类似的内容。
这可能会有所帮助：schier.co/blog/2014/12/08/…

标签： javascript php jquery ajax

【解决方案1】：

为了在用户完成输入后开始搜索，我们可以在用户释放一个键时启动一个计时器，如果他按下一个键就停止它。如果这两个事件之间的差异超过 2 秒，我们的事件将被触发。假设您输入的 id 为 inp

 var timer;

//Start a timer on keyup event
$('#inp').on('keyup', function () {
  //add loading indicator
  $('#results').html("<img src='loading.gif'>");
  clearTimeout(timer);       // clear timer
  timer = setTimeout(pesquisar, 2000);
});


$('#inp').on('keydown', function () {
  clearTimeout(timer);       // clear timer if user pressed key again
});

/call ajax function when user finished typing
function pesquisar(value) {
$("#results").show();
$.ajax({
    type:'post', 
    url:'/classes/searchfetch.php', 
    data: {s:value},    
    success: function (data){
        $("#results").html(data);
    },
}); };

【讨论】：

还有一件事，发生在它具有发送值的属性 onkeyup 之前。现在我该怎么办？
我没听懂你想说什么
算了，我已经找到解决办法了。非常感谢。

【解决方案2】：

可以使用如果用户在 2 秒内继续操作也会取消的计时器

var timer;

$('input').keyup(function(){
   // clear prior timeout
   clearTimeout(timer);
   // create new one
   timer = setTimeout(pesquisar, 2000)

})

【讨论】：