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調用排隊，完全只調用一次。但是，如果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' 
     ); 
});