Javascript 函数initialize（）和xmlhttp.onreadystatechange=函数（）事件顺序

我想我有一个事件顺序问题，我很难找到。作为背景，您可以查看此堆栈问题。他是一个英雄，他指出我的json中有一个额外的“来自我的数据库”，我能够解决这个问题，并且愚蠢地重新命名了几个变量

他的JSFIDLE工作得很好，但唯一的区别是我有一个AJAX调用，而不是在那里硬编码JSON。当我用JSON运行代码时，我的映射图上没有填充任何内容，所以我在其中放了一堆consoloe.log（）语句来查看发生了什么。我怀疑加载标记的函数是在ajax调用之前运行的

var gmarkers1 = [];
var markers1 = [];
var markerCluster;
var infowindow;
var lastmarker = null;
var xmlhttp = new XMLHttpRequest();
var url = "myJSONCode.php";


var SawtoothPassTrailhead = {
  name: "Sawtooth Pass Trailhead",
  lat:  36.453165,
  long:  -118.596751,
  type: "backpacking", 

  //Title then link
  seekAdventure: [],
  blogs: ['Mineral King Loop – Sequoia National Park (45 Mile Loop) - Backpackers Review' , 'https://backpackers-review.com/trip-reports/sequoia-mineral-king/'],
  youtTube: []
};

//Call PHP file and get JSON
xmlhttp.onreadystatechange = function() {
    console.log("order 1");
    if (this.readyState == 4 && this.status == 200) {
        myFunction(this.responseText);
        console.log("order 2");
    }
}
xmlhttp.open("GET", url, true);
xmlhttp.send();

var markers2 = new Array();


function myFunction(response) {
  var arr = JSON.parse(response);
  var i;
  var localTrailHeadID;
  var trailHeadCounter = 0;
  var TrailHeadObject;
  var lastTrailHeadID = 0;

  //set array conts all to zero
  var seekAdventureCount;
  var blogsCount;
  var youtubeCount;

  var j = 0;


  //for each row returned by mySQL
  for (i = 0; i < arr.length; i++) {
    localTrailHeadID = arr[i].TrailHeadID;

    //if previuse trailhead is the same as the current trail head get info and add to correct array
    if (localTrailHeadID == lastTrailHeadID) {
      if (arr[i].GuideMediaType == "SeekAdventure") {
        TrailHeadObject.seekAdventureGuideList[seekAdventureCount] = arr[i].GuideTitle;
        seekAdventureCount = seekAdventureCount + 1;
        TrailHeadObject.seekAdventureGuideList[seekAdventureCount] = arr[i].GuideLink;
        seekAdventureCount = seekAdventureCount + 1;
      }
      if (arr[i].GuideMediaType == "blog") {
        TrailHeadObject.blogGuideList[blogsCount] = arr[i].GuideTitle;
        blogsCount = blogsCount + 1;
        TrailHeadObject.blogGuideList[blogsCount] = arr[i].GuideLink;
        blogsCount = blogsCount + 1;
      }
      if (arr[i].GuideMediaType == "YouTube") {
        TrailHeadObject.youTubegGuideList[youtubeCount] = arr[i].GuideTitle;
        youtubeCount = youtubeCount + 1;
        TrailHeadObject.youTubegGuideList[youtubeCount] = arr[i].GuideLink;
        youtubeCount = youtubeCount + 1;
      }

    }

    //create new object and then add guide to correct array
    else {

      //add object to array of markers except on first round
      if (j == 0) {
        j = j + 1;
      } else {
        markers1[trailHeadCounter] = TrailHeadObject;
        console.log(trailHeadCounter);

        trailHeadCounter = trailHeadCounter + 1;
      }

      //create new trailhead object
      TrailHeadObject = new Object();

      //set array counters to zero
      var seekAdventureCount = 0;
      var blogsCount = 0;
      var youtubeCount = 0;

      //set name lat and long
      TrailHeadObject.name = arr[i].TrailHeadName;
      TrailHeadObject.lat = arr[i].TrailHeadLat;
      TrailHeadObject.long = arr[i].TrailHeadLong;

      //set TrailHeadObject Guide arrays to empty
      TrailHeadObject.seekAdventureGuideList = [];
      TrailHeadObject.blogGuideList = [];
      TrailHeadObject.youTubegGuideList = [];

      //Add trail Guide
      //check first guide media type and add to correct Array
      if (arr[i].GuideMediaType == "SeekAdventure") {
        TrailHeadObject.seekAdventureGuideList[seekAdventureCount] = arr[i].GuideTitle;
        seekAdventureCount = seekAdventureCount + 1;
        TrailHeadObject.seekAdventureGuideList[seekAdventureCount] = arr[i].GuideLink;
        seekAdventureCount = seekAdventureCount + 1;
      }
      if (arr[i].GuideMediaType == "blog") {
        TrailHeadObject.blogGuideList[blogsCount] = arr[i].GuideTitle;
        blogsCount = blogsCount + 1;
        TrailHeadObject.blogGuideList[blogsCount] = arr[i].GuideLink;
        blogsCount = blogsCount + 1;
      }
      if (arr[i].GuideMediaType == "YouTube") {
        TrailHeadObject.youTubegGuideList[youtubeCount] = arr[i].GuideTitle;
        youtubeCount = youtubeCount + 1;
        TrailHeadObject.youTubegGuideList[youtubeCount] = arr[i].GuideLink;
        youtubeCount = youtubeCount + 1;
      }

    } // end else statement

    //set last trailhead ID
    lastTrailHeadID = localTrailHeadID;
  } //end for Loop
} //end my function

//Proceses JSON Info and build Objects and place into markers1 arrray

///////////////////////////////
//add Hike Objects to Array////
///////////////////////////////
/**
 * Function to init map
 */

// Before we go looking for the passed parameters, set some defaults
// in case there are no parameters
var id;
var index = -1;

//set initial map values
var lat = 40.534900;
var lng = -101.343789;
var zoom = 4;

// If there are any parameters at eh end of the URL, they will be in  location.search
// looking something like  "?marker=3"

// skip the first character, we are not interested in the "?"
var query = location.search.substring(1);

// split the rest at each "&" character to give a list of  "argname=value"  pairs
var pairs = query.split("&");
for (var i = 0; i < pairs.length; i++) {
  // break each pair at the first "=" to obtain the argname and value
  var pos = pairs[i].indexOf("=");
  var argname = pairs[i].substring(0, pos).toLowerCase();
  var value = pairs[i].substring(pos + 1).toLowerCase();

  // process each possible argname  -  use unescape() if theres any chance of spaces
  if (argname == "id") {
    id = unescape(value);
  }
  if (argname == "marker") {
    index = parseFloat(value);
  }
  if (argname == "lat") {
    lat = parseFloat(value);
  }
  if (argname == "lng") {
    lng = parseFloat(value);
  }
  if (argname == "zoom") {
    zoom = parseInt(value);
  }
  if (argname == "type") {
    // from the v3 documentation 8/24/2010
    // HYBRID This map type displays a transparent layer of major streets on satellite images. 
    // ROADMAP This map type displays a normal street map. 
    // SATELLITE This map type displays satellite images. 
    // TERRAIN This map type displays maps with physical features such as terrain and vegetation. 
    if (value == "m") {
      maptype = google.maps.MapTypeId.ROADMAP;
    }
    if (value == "k") {
      maptype = google.maps.MapTypeId.SATELLITE;
    }
    if (value == "h") {
      maptype = google.maps.MapTypeId.HYBRID;
    }
    if (value == "t") {
      maptype = google.maps.MapTypeId.TERRAIN;
    }
  }
}

function makeLink() {
  var mapinfo = "lat=" + map.getCenter().lat().toFixed(6) +
    "&lng=" + map.getCenter().lng().toFixed(6) +
    "&zoom=" + map.getZoom() +
    "&type=" + MapTypeId2UrlValue(map.getMapTypeId());
  if (lastmarker) {
    var a = "https://www.seekadventure.net/adventureMap.html?id=" + lastmarker.id + "&" + mapinfo;
    var b = "https://www.seekadventure.net/adventureMap.html?marker=" + lastmarker.index + "&" + mapinfo;
  } else {
    var a = "https://www.seekadventure.net/adventureMap.html?" + mapinfo;
    var b = a;
  }

  document.getElementById("idlink").innerHTML = '<a href="' + a + '" id=url target=_new>Share Current Map View</a>';
}

function MapTypeId2UrlValue(maptype) {
  var urlValue = 'm';
  switch (maptype) {
    case google.maps.MapTypeId.HYBRID:
      urlValue = 'h';
      break;
    case google.maps.MapTypeId.SATELLITE:
      urlValue = 'k';
      break;
    case google.maps.MapTypeId.TERRAIN:
      urlValue = 't';
      break;
    default:
    case google.maps.MapTypeId.ROADMAP:
      urlValue = 'm';
      break;
  }
  return urlValue;
}
//----------------------------------------------------------
//initialize map 
function initialize() {
  console.log("initialize map");
  var center = new google.maps.LatLng(lat, lng);
  var mapOptions = {
    zoom: zoom,
    center: center,
    mapTypeId: google.maps.MapTypeId.TERRAIN
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
  for (i = 0; i < markers1.length; i++) {
    console.log("Adding Markers to map");
    addMarker(markers1[i]);
  }

  infowindow = new google.maps.InfoWindow({
    content: ''
  });

  // Make the link the first time when the page opens
  lastmarker = null;
  makeLink();

  // Make the link again whenever the map changes
  google.maps.event.addListener(map, 'maptypeid_changed', makeLink);
  google.maps.event.addListener(map, 'center_changed', makeLink);
  google.maps.event.addListener(map, 'bounds_changed', makeLink);
  google.maps.event.addListener(map, 'zoom_changed', makeLink);

  google.maps.event.addListener(map, 'click', function() {
    lastmarker = null;
    makeLink();
    infowindow.close();
  });
}

/**
 * Function to add marker to map
 */

function addMarker(marker) {
  var category = marker.type;
  var title = marker.name;
  var pos = new google.maps.LatLng(marker.lat, marker.long);
  var content = BuildBubbleHTML(marker);

  marker1 = new google.maps.Marker({
    title: title,
    position: pos,
    category: category,
    map: map
  });

  gmarkers1.push(marker1);

  // Marker click listener
  google.maps.event.addListener(marker1, 'click', (function(marker1, content) {
    return function() {
      infowindow.setContent(content);
      infowindow.open(map, marker1);
      map.panTo(this.getPosition());
      //map.setZoom(15);
    }
  })(marker1, content));
}

/////////////////////////
///Functions For Links///
/////////////////////////

//put pop up bubble html together 
function BuildBubbleHTML(hike) {
  html = "";
  html = html + '<h6>' + hike.name + '</h6>';
  //If Seek Adventure Links Exist
  if (hike.seekAdventureGuideList.length > 0) {
    seekAdventureHTML = '<p>Seek Adventure Links</p>';
    seekAdventureHTML = seekAdventureHTML + '<ul>'
    var i;
    for (i = 0; i < hike.seekAdventureGuideList.length; i += 2) {
      seekAdventureHTML = seekAdventureHTML + '<li>';
      seekAdventureHTML = seekAdventureHTML + '<a href="' + hike.seekAdventureGuideList[i + 1] + '"target="_blank">';
      seekAdventureHTML = seekAdventureHTML + hike.seekAdventureGuideList[i] + '</a></li>';
    }
    seekAdventureHTML = seekAdventureHTML + '</ul>';
    html = html + seekAdventureHTML;
  }

  //If Blog Links Exist
  if (hike.blogGuideList.length > 0) {
    blogHTML = '<p>Blog Links</p>';
    blogHTML = blogHTML + '<ul>'
    var i;
    for (i = 0; i < hike.blogGuideList.length; i += 2) {
      blogHTML = blogHTML + '<li>';
      blogHTML = blogHTML + '<a href="' + hike.blogGuideList[i + 1] + '""target="_blank">';
      blogHTML = blogHTML + hike.blogGuideList[i] + '</a></li>';
    }
    blogHTML = blogHTML + '</ul>';
    html = html + blogHTML;
  }
  return html;
};

我不知道为什么订单1会运行多次。订单1在我的

xmlhttp.onreadystatechange=function（）中

我希望控制台日志的输出更像：

Order 1
0
1
2
3
4
5
6
7
Order 2
Initialize map

因为我需要从数据库中获取所有数据，解析JSON，构建新的标记数组，然后将其添加到映射中
 这是因为调用多次，每次更改都会调用它。当连接打开时，当您收到响应头时，当响应主体开始发送时，以及当响应主体收到时，可以调用它。这就是为什么那里有一个签入
readyState==4
<代码>4

是

XMLHttpRequest.DONE

---

要确保在AJAX响应到来之前调用了

initialize

，可以将

xmlhttp.send（）

调用放在该函数的末尾。

AJAX是异步的。在AJAX回调函数中初始化映射。有意义。。。。我假设我的地图是从我的html页面初始化的，下面这行代码是：我可以把初始化函数放在我的ajax函数中吗？@geocodezip我想它已经修复了，不确定我是否以最干净的方式修复了它，但它似乎可以工作。我刚刚在AJAX回调函数的末尾再次调用了initialize函数，现在有了一个竞争条件，调用

initialize

两次就解决了这个问题。您希望在AJAX数据到达（回调函数运行时）和Google Maps Javascript API v3加载时初始化映射（调用

&callback=initialize

运行。同时启动这两个函数，最后一个运行的函数将起作用。您可以使操作串行化：调用一个加载函数在AJAX回调中加载API，然后调用

initialize

或在

initialize

函数中发出AJAX请求，该函数仅使用数据加载后，标记将被删除。两个选项都需要更长的时间。

Order 1
0
1
2
3
4
5
6
7
Order 2
Initialize map