Jquery中無響應的淡入淡出

Question

我正在用下面的jQuery實現twitter風格的關注/取消關注功能。

$(function() { 
    $(".follow").click(function(){ 
     var element = $(this); 
     var I = element.attr("id"); 
     var info = 'id=' + I; 
     $("#loading").html('<img src="loader.gif" >'); 

     $.ajax({ 
      type: "POST", 
      url: "follow.php", 
      data: info, 
      success: function(){ 
       $("#loading").ajaxComplete(function(){}).slideUp(); 
       $('#follow'+I).fadeOut(200).hide(); 
       $('#remove'+I).fadeIn(200).show(); 
      } 
     }); 
     return false; 
    }); 
}); 

我有一個類似的取消關注功能。不過，我有以下問題：

當我有N項目{1,2..i.N}每個與id = followi和我點擊按鈕。我發現有些項目有反應，有些則不反應。我懷疑這是一個純粹的JavaScript問題......否則我認爲沒有一個按鈕會響應。

這是一個時間問題...所有幫助表示讚賞。如果你能指點我一個更簡單的方法，我也會很感激。

謝謝！

Answer 1

那麼你正在你的ajax成功處理程序中進行UI更新，所以更新UI的反應時間基於Ajax響應的速度。如果服務器沒有成功返回，UI更新根本不會發生。

一種更簡單的方法，與即時響應：

$(function() { 
    $(document.body).delegate(".follow","click",function(){ 
     var element = $(this); 
     var I = element.attr("id"); 
     var info = 'id=' + I; 
     $("#loading").html('<img src="loader.gif"/>'); 

     $('#follow'+I).fadeOut(200); // act instantly since we assume it will go well 
     $('#remove'+I).fadeIn(200); // act instantly since we assume it will go well 

     $.ajax({ 
      type: "POST", 
      url: "follow.php", 
      data: info, 
      complete: function(){ //always remove the loader no matter if it goes well or not 
       $("#loading").slideUp(); 
      }, 
      error: function() { 
       //handle error 
       $('#follow'+I).fadeIn(200); // correct mistake 
       $('#remove'+I).fadeOut(200); // correct mistake 
      } 
     }); 
     return false; 
    }); 
});