Question

我只想实现这一目标。如果用户正在搜索关键字示例“stackoverflow”，我只想在此之后发送一个ajax调用。不是每次按任何键。因此，每次按下一个键，我都可以节省很多ajax呼叫。

我试图检查一下，如果用户在按任意键后没有再按任何一秒钟，那么我正在发送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');
        }
    })
})

Answer 1

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);

});

注意：从几个月前的代码中取出的代码，不记得链接

修改

检查jsFiddle。检查代码中的注释并在控制台中输出以获得更好的描述

Answer 2

希望这会有所帮助......

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

Answer 3

试试这个：

<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>

Answer 4

如果您的用户连续输入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

Answer 5

如果您想在一段时间后做某事，并且该时间可以在 keyup 等特定事件后重置，最好的解决方案是使用 clearTimeout 和 setTimeout 方法：

// declare the timeout variable out of the event listener or in global scope
var timeout = null;

$("#some-id-to-bind-event").keyup(function() {
    clearTimeout(timout); // this will clear the recursive unneccessary calls
    timeout = setTimeout(() => {
         // do something: send an ajax or call a function here
    }, 2000);
    // wait two seconds

});

在两秒钟之后做一些事情

5 个答案: