Jquery에서 지연 Ajax

Question

버튼을 클릭하면 새 데이터가 Ajax 함수로 DIV에로드됩니다. 사용자가 다른 버튼을 클릭하면 데이터가 페이드 아웃되고 데이터가로드되고 DIV가 다시 페이드 인합니다. 문제는 사용자가 DIV 버튼을 클릭하면 사라지지만 새로운 데이터가 이미로드 된 상태입니다.

페이드 아웃 전에 새로운 데이터가로드되지 않도록하기 위해 FadeOut 함수에서 콜백을 사용하려고했지만 도움이되지 않았습니다. 내 코드는 다음과 같습니다 : 콜백 페이드 아웃의

효과 :

$("#core").fadeOut(500, processingPages.loadPage(clickedButton)); 

loadPage 기능 : 내가 잘못 뭐하는 거지

loadPage: function(bottomMenu) { 
      $("#indicator").show(); 
      $.ajax({url: bottomMenu.attr('href'), 
      dataType: 'html', 
      timeout: 5000, // 5 seconds 
      success: function(html) { 
      $("#indicator").hide(); 
      $("#core").html(html).fadeIn(500); 
         } 
        } 

? 왜 페이드 아웃은 500ms를 기다리지 않고 loadpage 기능을 실행하지 않습니다. Ajax 기능이 왜 즉시 트리거됩니까?

Answer 1

시도 :

$("#core").fadeOut(500, function(){ 
    processingPages.loadPage(clickedButton); 
}); 

Answer 2

$("#core").fadeOut(500, function() { 
    processingPages.loadPage(clickedButton)); 
}); 

이 일반적인 실수이다. 함수를 전달한다는 의미지만 함수의 반환 값을 실제로 전달하는 것은 나중에 실행하도록 요청하는 것이 아니라 즉시 실행하기 때문입니다.

광산에서는 실행될 때 (즉, 페이드 아웃 한 후) 코드를 수행하는 익명의 함수 (함수의 반환 값이 아닌)를 전달하고 있습니다.

그것은 함수 참조와 함수 호출 사이의 차이점입니다.

alert //reference to alert function 
alert('hello'); //invocation of alert function 

Answer 3

약속을 사용하십시오. 일을 정말 간단하게 유지합니다. 이 간단한 예제이지만

var fadingOut = $("#core").fadeOut(500).promise() 

fadingOut.done(function() { 
    processingPages.loadPage(clickedButton) 
}); 

,이 습관을 모든 것이 당신을 위해 훨씬 쉽게 될 것입니다.

약속을 ajax와 함께 사용할 수도 있습니다. jquery ajax는 기본적으로 약속을 반환합니다. loadPage 함수는 다음과 같이 표시 될 수 있습니다.

loadPage: function(bottomMenu) { 
    $("#indicator").show(); 
    var gettingData = $.ajax({url: bottomMenu.attr('href'), 
     dataType: 'html', 
     timeout: 5000 
    }); 

    gettingData.done(function(html) { 
     $("#indicator").hide(); 
     $("#core").html(html).fadeIn(500); 
    }); 

    gettingData.fail(function() {alert("There was a problem loading your data";}); 
}