Ajax post method being deferred. Called after I expect it to be

Question

So I'm trying to get a JSON object set to the variable called "itemArray". The function which sets the JSON object ("findCharItems()") is called before the reference to the JSON object happens. But the post method inside the findCharItems() seems to wait until initialSetup() has finished until it makes the ajax post call.

So, the itemArray is set - just not when I expect it to be called.

I have several console logs. Here is the order in which the occur:

undefined (console.log(charPlaceID);)

functions.js:69 Inside findCharItems

functions.js:48 intitalSetup - itemArray:

functions.js:49 Uncaught TypeError: Cannot read property 'item' of undefinedinitialSetup @ functions.js:49(anonymous function) @ functions.js:101fire @ jquery-2.1.4.js:3099self.fireWith @ jquery-2.1.4.js:3211done @ jquery-2.1.4.js:8264(anonymous function) @ jquery-2.1.4.js:8605

functions.js:71 findCharItems - data:{"item" : []}

functions.js:73 findCharItems - itemArray:[object Object]

var charPlaceID = '';
var charName = '';
var charGender = 'male';
var charAgility = 0;
var charStrength = 0;
var charIntellect = 0;
var charWisdom = 0;
var charMaxHP = 10;
var charCurHP = 10;
var charMaxMP = 8;
var charCurMP = 8;
var charMaxStamina = 0;
var charCurStamina = 0;
var charMaxWill = 0;
var charCurWill = 0;
var charExperience = 0;
var charLevel = 1;

var itemArray;

function initialSetup() {

    findCharItems();
    $("#multiInv").hide();
    $("#multiEquip").hide();
    $("#multiSkills").hide();
    $("#multiPeople").hide();
    $("#multiParty").hide();
    $(".mapScreen").css({"background-image": "url('./images/StallwardVillage.png')",
        "background-repeat": "no-repeat", "background-size": "cover"});
    $(".hpMpScreen").text("HP: " + charCurHP + "/" + charMaxHP + " Stamina: " + charCurStamina + "/" + charMaxStamina);
    $(".willScreen").text("MP: " + charCurMP + "/" + charMaxMP + " Will: " + charCurWill + "/" + charMaxWill);

    $("#multiStats").html("<table class='statTbl'><tr><td colspan='2'>" + charName + "'s Stats</td></tr>" +
            "<tr><td>Health: </td><td>" + charMaxHP + "</td></tr>" +
            "<tr><td>MP: </td><td>" + charMaxMP + "</td></tr>" +
            "<tr><td>Stamina: </td><td>" + charMaxStamina + "</td></tr>" +
            "<tr><td>Will: </td><td>" + charMaxWill + "</td></tr>" +
            "<tr><td>Agility: </td><td>" + charAgility + "</td></tr>" +
            "<tr><td>Strength: </td><td>" + charStrength + "</td></tr>" +
            "<tr><td>Intellect: </td><td>" + charIntellect + "</td></tr>" +
            "<tr><td>Wisdom: </td><td>" + charWisdom + "</td></tr></table>");



    $("#multiInv").append("<table><tr><td colspan='2'>Inventory</td></tr>");
    $("#multiEquip").append("<table><tr><td colspan='2'>Equip</td></tr>");
    console.log("intitalSetup - itemArray:" + itemArray);
    for (var i = 0; i < itemArray.item.length; i++) {
        var unequipButton = "<div class='unequipBtn'>Unequip</div>";
        var equipButton = "<div class='equipBtn'>Equip</div>";

        if (itemArray.item[i].isEquipped == 'true') {
            $("#multiEquip").append("<tr><td>" + itemArray.item[i].itemName + "</td><td>" + unequipButton + "</td></tr>");
        } else if (itemArray.item[i].type == 'clothing' || 'armor' || 'leather') {
            $("#multiInv").append("<tr><td>" + itemArray.item[i].itemName + "</td><td>" + equipButton + "</td></tr>");
        } else {
            $("#multiInv").append("<tr><td>" + itemArray.item[i].itemName + "</td><td></td></tr>");
        }
    }
    $("#multiInv").html("</table>");
    $("#multiEquip").html("</table>");



}

function findCharItems() {
    console.log("Inside findCharItems");
    $.post("findCharItems.php").done(function (data) {
        console.log("findCharItems - data:" + data);
        itemArray = JSON.parse(data);
        console.log("findCharItems - itemArray:" + itemArray);
    });
}

function findChar() {
    $.post("findChar.php").done(function (data) {
        var jsonData = JSON.parse(data);
        var charFound = jsonData.character.length;
        if (charFound > 0) {
            charPlaceID = jsonData.character[0].placeID;
            console.log(charPlaceID);
            charName = jsonData.character[0].name;
            charGender = jsonData.character[0].gender;
            charAgility = jsonData.character[0].agility;
            charStrength = jsonData.character[0].strength;
            charIntellect = jsonData.character[0].intellect;
            charWisdom = jsonData.character[0].wisdom;
            charMaxHP = jsonData.character[0].maxHP;
            charCurHP = jsonData.character[0].curHP;
            charMaxMP = jsonData.character[0].maxMP;
            charCurMP = jsonData.character[0].curMP;
            charMaxStamina = jsonData.character[0].maxStamina;
            charCurStamina = jsonData.character[0].curStamina;
            charMaxWill = jsonData.character[0].maxWill;
            charCurWill = jsonData.character[0].curWill;
            charExperience = jsonData.character[0].experience;
            charLevel = jsonData.character[0].level;
            $("#gameLayout").show();
            initialSetup();
        } else {
            $("#characterCreation").show();
        }




    });
}

Any ideas why this is happening? I want itemArray to be set before the reference to it occurs. But I need findChar() to call before itemArray is called because it checks to see if there are any characters who have an itemArray to find.

Thank you for your time.