Javascript函数命令AJAX [复制]

Question

这个问题在这里已有答案：

• 如何让jQuery执行同步而非异步的Ajax请求？ 14个答案

我的问题是pointOnMap（）在xmlPreparer（）之前运行，尽管顺序。 我认为它与使用AJAX有关。 parseXML创建我需要的对象。 所以当我使用pointOnMap（）时，它应该已经初始化了。

在页面上我首先看到从pointOnMap - 0和之后从解析..所以它不是正确的顺序。
谢谢你的建议。

var mesta= new Array();


function init() {
    xmlPreparer();
    pointOnMap();   
}

//add source
function xmlPreparer() {   
    $.ajax({
    type: "GET",
    url: "./mesta.xml",
    dataType: "xml",
    success: parseXml
  });
}

function parseXml(xml) {

    var type;
    var name;
    var latitude;
    var longitude;

  $(xml).find("city").each(function()
  {
    type=$(this).find("type").text();
    name=$(this).find("name").text();
    latitude= $(this).find("latitude").text();
    longitude=$(this).find("longitude").text();
    var mesto = {type:type, name:name, latitude:latitude, longtitude:longitude};
    mesta.push(mesto);
  });
    alert(mesta.length);//this prints right size
}

//add source
function pointOnMap() {
alert(mesta.length);//for no reason prints 0 and runs before xmlparser?
$('#dot').css('top', YLatToPixel(0,$('#jpMapa')))
$('#dot').css('left', XLngToPixel(0,$('#jpMapa'))+'px');
}

function YLatToPixel(lat,elem){
var containerHeight=$(elem).height();
lat+=90;
var calculatedHeight=((lat*containerHeight)/180);
return $(elem).offset().top+($(elem).height()-calculatedHeight);
}


function XLngToPixel(lng,elem){
var containerWidth=($(elem).width());
lng=lng+180;
return $(elem).offset().left+((lng*containerWidth)/360);
}

Answer 1

使用像这样的jQuery承诺重做它：

function init() {
    xmlPreparer().then(function(data){
        parseXml(data);
        pointOnMap();   
    });
}

//add source - returns the Ajax promise
function xmlPreparer() {   
   return $.ajax({
    type: "GET",
    url: "./mesta.xml",
    dataType: "xml"
  });
}

注意： then和done之间的区别在于， then允许传递第二个fail函数。 done就像success:在Ajax中有一个匹配的fail()函数，所以你也可以写。

function init() {
    xmlPreparer().done(function(data){
        parseXml(data);
        pointOnMap();   
    }).fail(function(){
        alert("arggh!");
    });
}