javascript和jQuery执行顺序

Question

我正在尝试使用Javascript/jQuery/Google Maps API编写一些代码。

但是，在我的脚本中的执行顺序有点奇怪。

var flats=[]; 
function initialize() { 
    var mapOptions = { 
    zoom: 10, 
    center: new google.maps.LatLng(50.062, 19.937), 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
    var map = new google.maps.Map(document.getElementById('map-canvas'),mapOptions); 

    /* Puling flats data using my API */ 
    $.getJSON("http://ks3353689.kimsufi.com:5000/v1/closest_pointlng=19.937&lat=50.062",parseFlat); 
    function parseFlats(data){ 
    /* I put flats data in format usable by Google maps API */ 
    $.each(data, function(i, item){ 
     flat = []; 
     flat.push('flat_name'); 
     flat.push(parseFloat(item.latitude)); 
     flat.push(parseFloat(item.longitude)); 
     // z-index to display flats on map 
     flat.push(i+1); 
     flats.push(flat); 
    }); 
    console.log("I'm inside the function"); 
    } 
    console.log("activating markers"); 
    setMarkers(map, flats); 
} 

我认为jQuery的API调用将前setMarkers功能被执行，但是当我看着萤火虫，顺序是不同的：

activating markers 
I'm inside the function 

我在做什么错？我怎样才能确保jquery部分在setMarkers函数之前执行？

Answer 1

你的问题是$ .getJSON的异步性质。如果你只需要parseFlats后打电话到setMarkers（地图，单位），把它里面parseFlats

$.getJSON("http://ks3353689.kimsufi.com:5000/v1/closest_pointlng=19.937&lat=50.062",parseFlat); 
function parseFlats(data){ 
    /* I put flats data in format usable by Google maps API */ 
    $.each(data, function(i, item){ 
    flat = []; 
    flat.push('flat_name'); 
    flat.push(parseFloat(item.latitude)); 
    flat.push(parseFloat(item.longitude)); 
    // z-index to display flats on map 
    flat.push(i+1); 
    flats.push(flat); 
    }); 
    console.log("I'm inside the function"); 
    console.log("activating markers"); 
    setMarkers(map, flats);  
} 

另一种可能是使用$阿贾克斯与ASYN属性设置为false（但我不会推荐它，因为浏览器会阻塞，直到收到服务器应答）

$.ajax({ 
    dataType: "json", 
    url: 'http://ks3353689.kimsufi.com:5000/v1/closest_pointlng=19.937&lat=50.062', 
    success: parseFlat, 
    async:false 
}); 

Answer 2

执行的确切顺序是：

1. 分配可变mapOptions
2. 分配可变map
3. 呼叫$.getJSON，它发送一个AJAX请求和登记在接收到答复时要调用的函数。
4. 日志activating markers
5. 致电setMarkers()。
6. 从initialize()函数返回到浏览器的事件循环。
7. 当收到AJAX响应时，请致电parseFlats()，该日志记录为I'm inside the function。

请记住，AJAX中的第一个A代表异步。

Answer 3

移动setMarkers在parseFlats里面，你会得到你想要的订单。