더블 비동기 AJAX 함수

Question

그래서 페이지를 새로 고치지 않고 내 사이트의 페이지를 동적으로로드하는 javascript 스크립트를 작성하려고합니다. 기본적으로 콘텐츠 div를 페이드 아웃하고 새로운 콘텐츠를로드하고 콘텐츠를 전환 한 다음 페이드 인하는 기능이 있습니다. 비동기식 AJAX 요청을 사용하여 콘텐츠를로드합니다. 비동기식 AJAX 요청을 사용하면 콘텐츠를 페이드 인하는 함수를 호출 할 수 있습니다. 함수는로드 함수와 fadeout 함수가 모두 수행 될 때까지 실행되어서는 안됩니다. 내용이 페이드 아웃되는 동안 페이지가로드되기를 원하지만 현재는 페이드 애니메이션이 고정되어 있습니다. 이 문제를 파악하기 위해 여러 가지 방법을 시도했지만 지금까지 아무 것도 작동하지 않습니다 ...

아이디어가 있으십니까?

Answer 1

이것은 두 가지 이벤트가 완료 될 때까지 기다리는 것과 둘 다 완료 될 때까지 조치를 취하는 것입니다. my answer to this other question을 참조하십시오. 기본적으로 :

각 이벤트마다 플래그가 있습니다. 처음에는 false입니다. 문제의 두 이벤트 (애니메이션 완료 콜백 및 아약스 성공)를 연결합니다. 각 이벤트는 플래그를 설정하고 함수를 호출합니다. 이 함수는 플래그를 검사합니다. 두 함수가 모두 설정되면 무언가를 수행합니다 (귀하의 경우 새 내용을 설정 함). 코드 예제는 링크를 참조하십시오.

Answer 2

나는 비슷한 것을하는 사이트가 있습니다. 이 기능은, 밖으로 밀어 컨텐츠를 교체하고 다음과 같습니다에서 슬라이드 :

var loadAnAjaxArticle = function (url) { 
    var removeParentArticle = function() { 
     // I don't like doing this, but so far haven't found a 
     // particularly elegant way to replace the article 
     // when calling load(), only append it. 
     $('article').first().html($('article').last().html()); 
    }; 

    var showArticle = function (response, status, xhr) { 
     if (status == "error") { 
      $('article').first().html('<h2>There was an error processing your request.</h2>'); 
      $('article').first().slideDown('slow'); 
     } else { 
      removeParentArticle(); 
      $('article').first().slideDown('slow'); 
     } 
    }; 

    var loadArticle = function() { 
     $('article').first().load(url + ' article', showArticle); 
    }; 

    $('article').first().slideUp('slow', loadArticle); 
} 

기본적으로, 다른 함수에 대한 콜백을 제공하는 내용을 숨기도록 .slideUp를 호출합니다. 이 함수는 .load을 호출하여 내용을 새로 고치고 다른 함수에 콜백을 제공합니다. 해당 함수는 DOM을 약간 수정하여 (개발 초기에, 아직 좀 더 우아하게 만들지는 않았지만) 올바르게 보이게하고, 내용을 다시 표시하기 위해 .slideDown을 호출합니다.

내가 사용하고있는 각 기능이 콜백을 허용하기 때문에이 경우 쉽게 할 수 있습니다. 사용중인 기능이 동일한 기능을 가지고 있다면 이러한 방식으로 연결할 수 있어야합니다.

Answer 3

플래그를 설정하고 두 가지 완료 기능을 모두 사용하여 두 이벤트가 완료되었는지 확인하면됩니다. 둘 다 완료 기능이 완료되면 다음 작업을 트리거합니다. HTTP ([모두 완료되면 콜백을 jQuery로 두 개의 이벤트를 기다렸다가 실행]의

function loadNewPage(args) { 

    var fadeDone = false; 
    var ajaxData; 

    function processAjaxDataWhenReady() { 
     // if both have completed, then process the ajaxData and start the fadeIn 
     if (fadeDone && ajaxData) { 
      // process the ajaxData here 
      $("#myContent").fadeIn(); 
     } 
    } 

    // start the fadeOut 
    $("#myContent").fadeOut(function() { 
     fadeDone = true; 
     processAjaxDataWhenReady(); 
    }); 

    // start the ajax call 
    $.ajax({...}, function(data) { 
     ajaxData = data; 
     processAjaxDataWhenReady(); 
    }) 

}