ダブル非同期AJAX関数

Question

私はページを更新せずに自分のサイトにページを動的にロードするためのjavascriptスクリプトを作成しようとしています。基本的には、コンテンツdivをフェードアウトし、新しいコンテンツをロードし、コンテンツを切り替えてからフェードインする機能を持っています。コンテンツは、非同期AJAXリクエストを使用してロードされ、成功するとコンテンツをフェードインする関数が呼び出されます。関数は、ロード関数とフェードアウト関数の両方が実行されるまで実行しないでください。コンテンツがフェードアウトしている間はページをロードしたいが、今はフェードしているアニメーションがフリーズしている。私はこれを把握するためにさまざまな方法を試しましたが、これまでのところ何も動作していません...

アイデア？

Answer 1

これは、2つのイベントが完了するのを待つことと、両方が完了したときに行動を起こすのを待つことです。 my answer to this other questionを参照してください。基本的に：

イベントごとにフラグがありますが、最初はfalseです。問題の2つのイベント（アニメーションの完了コールバック、およびajaxの成功）をフックします。各イベントはフラグを設定し、関数を呼び出します。その関数はフラグをチェックします：もし両方がセットされていれば、何かを行います（あなたの場合、新しいコンテンツを設定します）。コード例については、リンクを参照してください。

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

フラグを設定して、両方の完了関数が両方のイベントが完了しているかどうかを確認するだけで済みます。いずれの補完機能も完了していれば、次の動作をトリガする。

あなたは私達にあなたのコードのいずれかの詳細を与えるが、ここでは一般的な考え方ですしていない：[jQueryを使って二つの事象を待ちとの両方が行われたときにコールバックを実行]（HTTPの

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

}