Question

好吧，所以我有这个脚本有点工作。 ajax调用有效，返回正确的数据。问题在于，当快速按下击键时（不是真正快速按下，只是正常的打字速度），动画会不停地前后移动，并且每个ajax调用仍然会被执行。

我怎样才能这样做：

1）ajax调用不会叠加和 2）fadein和fadeout动画不会堆积起来

我有这个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调用排队，则只调用一次。但是如果ajax调用的响应时间小于用户打字速度，你可能仍会看到闪烁。

由于多个fadein / fadeout动画排队，因此在输入停止后很长时间你也可能会连续'闪烁'。为避免使用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'
          );
});

jquery ajax onkeystroke停止动画？

1 个答案: