jquery ajax onkeystroke остановить анимацию

Question

Хорошо, у меня есть сценарий, который работает.Вызов ajax работает и возвращаются правильные данные.Проблема в том, что когда клавиши нажимаются быстро (не очень быстро, просто нормальная скорость набора текста), анимация продолжает идти вперед и назад, и каждый вызов ajax все еще выполняется.

Как сделать так, чтобы:

1) вызовы ajax не складываются, и 2) анимации исчезновения и затухания не продолжают складываться

У меня есть этот JavaScript:

    $(document).ready(function(){

$t = $("#data-users");

$('#data-overlay').css({
  opacity : 0.5,
  top     : $t.offset().top,
  width   : $t.outerWidth(),
  height  : $t.outerHeight()
});

$('.loader').css({
  top  : ($t.height() / 2),
  left : ($t.width() / 2)
});

    $('.findit').keyup(function(){
        var search;
        search = $(this).val();
            $('#data-overlay').fadeIn();
            //get the data
            $.post(
            '/users/testajax',
            {
            search: search
            },
            function(responseText){
                $("#data-users").html(responseText);
                $('#data-overlay').fadeOut();
            },
            'html'
            );

    });
});

Answer 1

Два предложения: одно из них - использовать .ajaxStart() и .ajaxComplete(), что гарантирует, что если второй вызов ajax находится в очереди, то вызов complete выполняется только один раз.Но вы все равно можете увидеть мерцание, если время ответа на вызов ajax меньше, чем скорость набора текста пользователями.

Вы также можете непрерывно мигать долго после остановки ввода, поскольку несколько анимаций исчезновения / затухания находятся в очереди,Чтобы избежать этого, используйте функцию stop(false,false).

Чтобы уменьшить количество вызовов AJAX (таким образом, также число fadein / fadeout), установите небольшую задержку для функции keyup, чтобыajax-вызов выполняется после небольшой задержки, и если пользователь быстро набирает номер, выполняется только один вызов.

Объединение трех:

jQuery.fn.keyupQueue = function(callback, delay) {
    return this.each(function(){
        var timer = null;
        $(this).keyup(function() {
            if (timer)
                window.clearTimeout(timer);
            timer = window.setTimeout( function() {
                timer = null;
                callback();
            }, delay || 200);
        });
    });
};

$("#data-overlay").bind("ajaxSend", function(){
    $(this).stop(true,true).fadeIn();
}).bind("ajaxComplete", function(){
    $(this).stop(true,true).fadeOut();
});

$('.findit').keyupQueue(function(){
    $.post('/users/testajax', 
           { search: $(this).val() },
           function(responseText){
               $("#data-users").html(responseText);
           },
           'html'
          );
});