SharePoint JavaScript Execute Asynchron functions after another

By design SP.ClientContext.executeQueryAsync function accepts two parameters:

• succeededCallback A function or a delegate of the method to call if the request executes successfully.
• failedCallback A function or a delegate of the method to call if the request fails to execute.

Given that fact, you could consider the following approach to execute the next function once the previous one is completed:

var ctx = SP.ClientContext.get_current();
var list = ctx.get_web().get_lists().getByTitle('Announcements'); 
var properties = {'Title' : 'New announcement',
              'Body' :  'Welcome to a new site'};

var itemCreateInfo = new SP.ListItemCreationInformation();
var listItem = list.addItem(itemCreateInfo);
for(var name in itemProperties)    
      listItem.set_item(name, itemProperties[name]);
listItem.update();
ctx.load(listItem);
ctx.executeQueryAsync(
   function(){
       //execute next function here... 
   },
   function(sender,args){
    console.log(args.get_message());
});

Alternatively you could consider to execute functions in a chainable manner via Promise, for example using jQuery.Deferred as demonstrated below

function executeQueryPromise(ctx, result) {
    result = result || {};
    var d = jQuery.Deferred();
    ctx.executeQueryAsync(function () {
         d.resolve(result);
    }, function (sender, args) {
         d.reject(args);
    });
    return d.promise();
}

Usage

var ctx = SP.ClientContext.get_current();
var list = ctx.get_web().get_lists().getByTitle('Announcements');

var properties = {'Title' : 'New announcement',
                  'Body' :  'Welcome to a new site'};
createListItem(list,properties)
.then(function(item){
    return readListItems(list);
},logError)
.then(function(items){
    console.log("Done");
},logError);

where

function logError(sender,args){
    console.log(args.get_message());
}

function createListItem(list,itemProperties){
    var ctx = list.get_context();
    var itemCreateInfo = new SP.ListItemCreationInformation();
    var listItem = list.addItem(itemCreateInfo);
    for(var name in itemProperties)    
          listItem.set_item(name, itemProperties[name]);
    listItem.update();
    ctx.load(listItem);
    return executeQueryPromise(ctx,listItem);
}

function readListItems(list){
    var ctx = list.get_context();
    var listItems = list.getItems(SP.CamlQuery.createAllItemsQuery());
    ctx.load(listItems);
    return executeQueryPromise(ctx,listItems);
}

Try nesting the function calls within the success() methods of the previous call. That will ensure that the functions will not execute until the previous one completes.

To handle the async call in a sequential manner, there is a provision given by jquery: Deferred ( factory function that returns a chainable utility object with methods to register multiple callbacks into callback queues, invoke callback queues, and relay the success or failure state of any synchronous or asynchronous function.)

reference link: https://api.jquery.com/jquery.deferred/ http://joseoncode.com/2011/09/26/a-walkthrough-jquery-deferred-and-promise/