延缓按键之间行动的jQuery

Question

我怎样才能延缓jQuery的按键之间的操作。 例如;

我有这样的事

 if($(this).val().length > 1){
   $.post("stuff.php", {nStr: "" + $(this).val() + ""}, function(data){
    if(data.length > 0) {
      $('#suggestions').show();
      $('#autoSuggestionsList').html(data);
    }else{
      $('#suggestions').hide();
    }
 });
}

欲防止发布数据，如果用户键入汽车无。所以，我怎么可以给0.5秒延迟？

Answer 1

您可以使用jQuery的数据能力，要做到这一点，是这样的：

$('#mySearch').keyup(function() {
  clearTimeout($.data(this, 'timer'));
  var wait = setTimeout(search, 500);
  $(this).data('timer', wait);
});

function search() {
  $.post("stuff.php", {nStr: "" + $('#mySearch').val() + ""}, function(data){
    if(data.length > 0) {
      $('#suggestions').show();
      $('#autoSuggestionsList').html(data);
    }else{
      $('#suggestions').hide();
    }
  });
}

这里的主要优点是所有的地方没有全局变量，你可以在你想要的setTimeout的匿名函数把这个包，只是试图让这个例子尽可能的干净。

Answer 2

所有你需要做的是包装你的功能在被复位超时，当用户按下一个键：

var ref;
var myfunc = function(){
   ref = null;
   //your code goes here
};
var wrapper = function(){
    window.clearTimeout(ref);
    ref = window.setTimeout(myfunc, 500);
}

然后简单地调用“包装”在你的关键事件。

Answer 3

有一个很好的插件来处理这个问题。 jQuery的节气门/去抖动

Answer 4

尼克的答案是完美的，但如果马上处理第一个事件是关键的话，我认为我们可以做到：

$(selector).keyup(function(e){ //or another event

    if($(this).val().length > 1){
        if !($.data(this, 'bouncing-locked')) {

            $.data(this, 'bouncing-locked', true)

            $.post("stuff.php", {nStr: "" + $(this).val() + ""}, function(data){
                if(data.length > 0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }else{
                    $('#suggestions').hide();
                }
           });

            self = this
            setTimeout(function() {
                $.data(self, 'bouncing-locked', false);

                //in case the last event matters, be sure not to miss it
                $(this).trigger("keyup"); // call again the source event
            }, 500)
        }
    }
});

Answer 5

我把它包在像这样的函数：

  var needsDelay = false;

  function getSuggestions(var search)
  {
    if(!needsDelay)
    {
        needsDelay = true;
        setTimeout("needsDelay = false", 500);

        if($(this).val().length > 1){
            $.post("stuff.php", {nStr: "" + search + ""}, function(data){
                if(data.length > 0) {
                    $('#suggestions').show();
                    $('#autoSuggestionsList').html(data);
                }else{
                    $('#suggestions').hide();
                }
            });
        }
    }


  }

这样，不管你有多少次ping此，你将永远不会搜索超过每500毫秒。