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