отсрочка действий между нажатиями клавиш в jQuery - PullRequest
Новая
       63

отсрочка действий между нажатиями клавиш в jQuery

30 голосов
/ 09 марта 2010

Как я могу отложить действия между нажатиями клавиш в 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();
    }
 });
}

Я хочу запретить публикацию данных, если пользователь постоянно печатает. Итак, как я могу дать задержку 5 секунд?

Ответы [ 5 ]

62 голосов
/ 09 марта 2010

Вы можете использовать способности данных 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, если хотите, просто пытаясь сделать пример максимально чистым.

10 голосов
/ 09 марта 2010

Все, что вам нужно сделать, это обернуть вашу функцию в таймаут, который сбрасывается при нажатии пользователем клавиши: 

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

Затем просто вызовите «обертку» в вашем ключевом событии.

3 голосов
/ 09 марта 2010

Есть хороший плагин, чтобы справиться с этим. jQuery Throttle / Debounce

2 голосов
/ 30 октября 2013

Ответ Ника идеален, но если обработка первого события немедленно необходима, я думаю, что мы можем сделать: 

$(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)
        }
    }
});
1 голос
/ 09 марта 2010

Я бы обернул его в такую ​​функцию: 

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


  }

Таким образом, независимо от того, сколько раз вы пингуете это, вы никогда не будете искать больше, чем каждые 500 миллисекунд.

...