$.ajax will pass your callback function the result of the AJAX request, so you can use a simple anonymous function to get both parts in. Let's say you have your callback function defined like this:
ajax = {};
ajax.mergeData = function(fleets, ajaxResult) {
console.log(fleets);
console.log(ajaxResult);
};
You can define your callback function as:
function(result) { ajax.mergeData(fleets, result); }
Putting that all together, your getShips function will look like this:
ajax.getShips = function(fleets) {
$.ajax({
type: "GET",
url: "getGameData.php",
datatype: "json",
data: {
type: "ships"
},
error: ajax.error,
success: function(result) { ajax.mergeData(fleets, result); }
});
};
To answer your second question: async: false is a deprecated option, so you can't rely on it to work. It will also lock up the browser until the server responds, which makes for a really bad user experience. It's far better to use callback functions or promises to carry out an action when your AJAX requests complete. Here's a short summary of the promises concept that might be useful.
Which leaves the last, big question: how do we chain these calls together so getShips() depends on the result of getFleets(), and manager.draw() depends on both? With just two calls, you could get away with just using callbacks; getShips' success callback invokes getFleets, and getFleets' callback invokes manager.draw. This is the easiest way to get an A → B → C dependency chain working – but we could also use jQuery's promises, which might make our code easier to follow.
First, let's change getFleets to return the result of calling $.ajax:
ajax = {};
ajax.getFleets = function() {
return $.ajax({ /* Details elided here */ });
}
Next, let's update getShips to make an AJAX request for that data, and return a promise that returns the combined data:
ajax.getShips = function(fleets) {
return $.ajax({ /* Details elided again */ })
.done(function(ajaxResult) { return mergeData(fleets, ajaxResult); });
};
This is a bit trickier; $.ajax returns a promise that will eventually resolve to our ship data. When it does, we'll call the function in .done that returns the merged data. And that .done also returns a promise – so getShips is now returning a promise that will eventually return the merged data.
So now we can write our window.onload function to chain all these together, and only call manager.draw when all the data's available:
window.onload = function() {
ajax.getFleets()
.done(ajax.getShips)
.done(manager.draw);
}
async: falseis deprecated and anyway was never the correct approach to anything