Calling function is executing first before called function

See more:

Javascript

WCFService

Hi, in my page I have a textbox. While user enter a text a event is firing.

document.body.addEventListener('change', function ( event ) {
if (event.srcElement.className == 'dynChange') {
debugger;
serailObject = {};
var keyString = event.srcElement.value;
var txtId = event.srcElement.id;
var isExist = isSerialExist(keyString);

debugger;
if(!isExist){
var result = licenseArray.filter(obj => {
return obj.ID == itemId && obj.txtID == txtId
})
if(result.length==0){ 
serailObject.ID = itemId;
serailObject.license = keyString;
serailObject.txtID =txtId;
licenseArray.push(serailObject);

}
else{
for (var i = 0; i < licenseArray.length; i++) {
if(licenseArray[i].ID == itemId && licenseArray[i].txtID == txtId){
licenseArray[i].license = keyString;
}
}
} 
// assign this value in hidden field..

hdn_license.value = null;
hdn_license.value = JSON.stringify(licenseArray);
}
else{
alert('serial already exist');
event.srcElement.value = "";
}
}
});

As you could see I am calling a function

isSerialExist()

function isSerialExist(serial){
        debugger
        var returnVal = false;
        var result = licenseArray.filter(obj => {
            return obj.license == serial
        })
        if(result.length==0){
            var IStockTransSvc = new WcfAjaxServices.IStockTransaction();
            IStockTransSvc.IsSerialExist(serial, function (result, context, OnSuccess) {

               returnVal = result;
            }, function (error, context, OnError) {
                toastify("error", error, "System Error", "toast-bottom-right", true);
            }, null);
        }
        else{
            return returnVal;
        }
    }

Note:- licenseArray : this array contains all texts entered by the user.

This function checks whether there is already a same string inside  licenseArray if yes then return false and if not then it call a wcf service to check if that string is presented in database.But my code flows like this

Code flows..

1.Calling a function
2.Calling a service if string is not present inside licenseArray..
3.Before assigning the result into returnVal, it jumps into block 3.
4.Then it is assigning   the result into returnVal.

What I want:

I want block 4 must be executed before block 3. So that I could check this condition,

if(!isExist){ // isExist undefined now..
//.....
}

What I have tried:

I have tried what is mentioned in my questions..