Jquery에서 응답없는 페이드 인 페이드 아웃

Question

다음 jquery로 트위터 스타일의 후속/내리기 기능을 구현합니다.

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

나는 비슷한 unfollow 기능을 가지고 있습니다. 그러나 나는 다음과 같은 문제가 있습니다 :

내가 N{1,2..i.N} 각각 id = followi으로 항목을 가지고 다음 버튼을 클릭합니다. 나는 다른 사람들이 반응하지 않는 동안 어떤 아이템이 반응하는 것을 발견했다. 나는 그것이 순수한 자바 스크립트 문제라고 생각한다. 그렇지 않다면 나는 아무 버튼도 전혀 반응하지 않을 것이라고 생각한다.

타이밍 문제입니까? 모든 도움을 주시면 감사하겠습니다. 또한 더 간단한 방법을 가르쳐 주시면 고맙겠습니다.

감사합니다.

Answer 1

아약스 성공 처리기에서 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; 
    }); 
});