做两件事后，两秒钟的keyup

我只是想实现这一点。如果用户正在搜索关键字示例“stackoverflow”，我只想在此之后发送ajax调用。不是每次按任何键时。因此，每次按一个键时，我都可以节省大量的Ajax电话。做两件事后，两秒钟的keyup

我试图检查，如果用户在按任何键后没有按两秒再按任何键，然后我发送ajax呼叫。但我不知道如何使用间隔或设置超时时间，请帮助，并希望你能理解我想说明的内容。谢谢

这是我的小代码。

$(document).ready(function(){ 
    var counter = 0; 
    $("#input").keyup(function(){ 

     var myInterval = setInterval(function() { 
      ++counter; 
     }, 1000); 

     if(myInterval > 2) 
     { 
      alert('ajax call going'); 
      clearInterval(myInterval); 
     } 
     else 
     { 
      alert('doing nothing'); 
     } 
    }) 
})

来源

2015-12-14 Tariq Husain

复制http://stackoverflow.com/questions/1836105/how-to-wait-5-seconds-with-jquery –

不重复的问题是不同的 –

var _changeInterval = null; 

$("#input").keyup(function() { 
    // wait untill user type in something 
    // Don't let call setInterval - clear it, user is still typing 
    clearInterval(_changeInterval) 
    _changeInterval = setInterval(function() { 
     // Typing finished, now you can Do whatever after 2 sec 
     clearInterval(_changeInterval) 
    }, 2000); 

});

注：代码从SO几个月收回，不请记住链接

编辑：

检查此jsFiddle。在代码中检查注释并在控制台中输出以获得更好的替换效果

来源

2015-12-14 07:26:39

:)感谢代码迄今为止的最佳代码，但我真的不知道它的工作方式。我无法理解流程 –

@TariqHusain请阅读内置评论。如果仍然不清楚，我会尽力解释它。 –

你已经清除了间隔clearInterval（_changeInterval）：那么它在setInterval函数中仍然会在两秒钟后进入 –

试试这个：

<script src="//code.jquery.com/jquery-1.11.2.min.js"></script> 
<input type="text" id="input"> 
<script> 
$(document).ready(function(){ 
    $("#input").keyup(function(){ 
     var str = $(this).val(); 
     setTimeout(function(){ 
      if(str == $("#input").val()) { 
       alert('ajax call going'); 
      } 
     }, 2000); 
    }); 
}); 
</script>

来源

2015-12-14 06:01:55

lastTime没有定义 –

你可能会错过第一行：var lastTime = new Date（）; –

仍然没有工作，它不等待两秒钟。每当我按下后，它向上键提醒阿贾克斯呼吁去。 –

希望这将有助于...

$("#input").keyup(function(){ 
    var x=$("#input").val(); 
    setTimeout(function(){ 
     if(x==$("#input").val()) { 
      alert('ajax call going'); 
     } 
    }, 3000); 
});

来源

2015-12-14 06:07:15 Sameer

这不会帮助我。根据你的答案，如果我输入堆栈它会结束Ajax调用5次，但晚了3秒。我只想一次不是5次 –

它不会调用ajax五次，因为变量x正在检查输入的值，所以只有在用户停止输入时才会发出ajax请求。这就是为什么3秒延迟 – Sameer

让我先试试:) –

如果您的用户连续输入20个字符，然后呢？ setTimeout将在一段时间后（在您定义的秒数后）调用。如果你想要最正确的方法，那么为什么不使用去抖动。

$(function(){ 

var default_text = $('#text-type').text(), 
    text_counter_1 = 0, 
    text_counter_2 = 0; 

// This function is not debounced, but instead bound directly to the event. 
function text_1() { 
    var val = $(this).val(), 
    html = 'Not-debounced AJAX request executed: ' + text_counter_1++ + ' times.' 
    + (val ? ' Text: ' + val : ''); 

    $('#text-type-1').html(html); 
}; 

// This function is debounced, and the new, debounced, function is bound to 
// the event. Note that in jQuery 1.4+ a reference to either the original or 
// debounced function can be passed to .unbind to unbind the function. 
function text_2() { 
    var val = $(this).val(), 
    html = 'Debounced AJAX request executed: ' + text_counter_2++ + ' times.' 
    + (val ? ' Text: ' + val : ''); 

    $('#text-type-2').html(html); 
}; 

// Bind the not-at-all debounced handler to the keyup event. 
$('input.text').keyup(text_1); 

// Bind the debounced handler to the keyup event. 
$('input.text').keyup($.debounce(250, text_2)); // This is the line you want! 

// Trigger the callbacks once to show some initial (zero) values. 
text_1(); 
text_2(); 
});

Blog这里是活生生的例子
Blog 2

来源

2015-12-14 08:06:13

检查新的接受答案，它工作知府 –

是的，这是最准确的答案+1 –

做两件事后，两秒钟的keyup

回答

相关问题