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函数之前执行，但是当我查看firebug时，顺序是不同的：

activating markers
I'm inside the function

我做错了什么？如何确保在setMarkers函数之前执行jQuery部分？

Answer 1

执行的确切顺序是：

分配变量mapOptions
分配变量map
调用$.getJSON，它发送一个AJAX请求并在收到回复时注册要调用的函数。
记录activating markers
致电setMarkers()。
从initialize()函数返回到浏览器的事件循环。
收到AJAX回复后，请拨打parseFlats()，然后记录I'm inside the function。

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

Answer 2

将setMarkers移到parseFlats的内部，即可获得所需的订单。

Answer 3

您的问题是$ .getJSON的异步性质。如果你需要在parseFlats之后调用setMarkers（map，flats），请在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);      
}

另一种可能性是使用$ .ajax并将asyn属性设置为false（但我不会推荐它，因为浏览器会阻止，直到收到服务器答案为止）

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

javascript和jquery执行顺序

3 个答案: