Jquery関数の返品の問題

Question

JavaScriptでは、同じ関数を3回呼び出していますが、返す順序は毎回変わります。あなたは私のコードを以下で見ることができます。場合によっては、page1.htmlが最初に読み込まれることがありますpage2.html

この問題を解決するにはどうすればよいですか？あなたはページのHTMLが非同期で取得するためにHTTP呼び出しを使用しているため、事前に

おかげで

$(document).ready(function() { 
    $("#button").click(function() { 
     addHtml('page1'); 
     addHtml('page2'); 
     addHtml('page3'); 
    }); 
}); 

function addHtml(url) { 
    if ($("#" + url).length == 0) { 
     $.get(url+'.html', function (result) { 
      $('.divtest').append(result); 
     }); 
    } 
}; 

Answer 1

シンプルなソリューション：検討すべき

$(document).ready(function() { 
    $("#button").click(function() { 
     addHtml('page1', function(){ 
      // page 1 added 
      addHtml('page2', function(){ 
      // page 2 added 
      addHtml('page3', function(){ 
       // All HTML added 
      }); 
      }); 
     }); 
    }); 
}); 

function addHtml(url, callback) { 
    if ($("#" + url).length == 0) { 
     $.get(url+'.html', function (result) { 
      $('.divtest').append(result); 
      callback(); 
     }); 
    } 
}; 

Answer 2

それは、非ブロッキングを意味します。したがって、応答時間に依存します。どのページが最初に追加されますか。

約束をreturn $.get(url+'.html')に返すことができます。

function addHtml(url) { 
    return $.get(url+'.html'); 
}; 

$("#button").click(function() { 
    addHtml('page1') 
    .then(function(result){ 
     $('.divtest').append(result); 
     return addHtml('page2'); 
    }) 
    .then(function(result){ 
     $('.divtest').append(result); 
     return addHtml('page3'); 
    }) 
    .then(function(result){ 
     $('.divtest').append(result); 
    }) 
});