How to call function in main block in javascript

Question

I am using two function one function having ajax calls i.e

function fetchProjectAreaConfigStateIds(projectAreaContextId) {
paConfigStateIdList = [];
var getUrl = widgetLink+ "/ccm/restcaller/"
        + projectAreaContextId;
var jqXHR = $
        .ajax({
            method : 'GET',
            url : getUrl,
            paId : projectAreaContextId,
            headers : {
                'Accept' : 'text/json',
                'Content-Type' : 'application/x-www-form-urlencoded; charset=utf-8'
            },
            success : function(data) {

                stateid = (/c=(.+)($|&|")/.exec(data[this.paId].imagePath))[1];
                console.log("State Id :" + stateid);

                return stateid;

            },
            error : function(jqXHR, textStatus) {

                console
                        .error('#ERROR: fetchProjectAreaStateIds: error retrieving enumerates for PA '
                                + _paId + '.');
            }
        });

        } 

and other function which does not have any ajax calls rather than its doing xml parsing i.e

 xhttp.open("GET", random , true);
 xhttp.send();
 function myFunction(xml) {

 xmlDoc = xml.responseXML;
 x = xmlDoc.getElementsByTagName('contextId');
 a = xmlDoc.getElementsByTagName('name');

for(i=0;i<a.length;i++)
{
    y = x[i].childNodes[0].nodeValue;
    if((a[i].childNodes[0].nodeValue)===(actualPA)){
    console.log("uuid for pa"+y);

    }

   }

  }

Now my main function where i am calling both the function

  $(document).ready(function() {
  console.log("Starting DefectFix Widget Script...");


  //onLoad: 1.Get pAID of tools/Component

  xhttp.onreadystatechange = function() 
  {
if (this.readyState == 4 && this.status == 200) {
    myFunction(this);
}
};
  if (parentLink.includes(templink)) {
        projectAreaContextId = ContextKeyValue; 
        console.log("y is "+projectAreaContextId);
    }
   fetchProjectAreaConfigStateIds(projectAreaContextId);


   }
//global parameter
var projectAreaContextId;
var xmlDoc;
var ContextKeyValue;
var ContextKey;
var ProjectAreaKey;
var random =widgetLink+"/ccm/rpt/repository/workitem?fields=workitem/projectArea/*";
var xhttp = new XMLHttpRequest();

Now my problem list :

1.The excepted value of ProjectAreaContextId shall be equal to that of ContextKeyValue (which abc34r),but is coming undefined 2.Am i doing a wrong call in main function for xml parser function if yes please correct because that is the reason why i feel value of ProjectAreaContextId goes undefined

Since i am new to javascript, i really don't know how to handle this scenario i want Myfunction() to be executed first and rather than the function with ajax call, so that value of ProjectAreaContextId gets updated firstly then goes as an actual parameter fetchProjectAreaConfigStateIds(projectAreaContextId) Your help will really be appreciated also please let me know if my question is not clear, Thanks in advance,Stay Safe!!

Edit 1 :

 xhttp.open("GET", random , true);
 xhttp.send();
 function myFunction(xml) {

 xmlDoc = xml.responseXML;
 x = xmlDoc.getElementsByTagName('contextId');
 a = xmlDoc.getElementsByTagName('name');

 for(i=0;i<a.length;i++)
{
y = x[i].childNodes[0].nodeValue;
if((a[i].childNodes[0].nodeValue)===(actualPA)){
console.log("uuid for pa"+y);

}

}
    if (parentLink.includes(templink)) {
    projectAreaContextId = ContextKeyValue; 
    console.log("y is "+projectAreaContextId);
}
}