Call Javascript function only after Success?

Question

I need to alter fields if 4 lists when a button is pressed. I've created a single CSOM (javascript) block code that I pass a parameter to. This being ID of item and the ListName.

Then I call the functions :

<input name="Submit1" type="button" value="LockItems"  onclick='LockItems()'/>

function LockItems()
{
lockListItems(tID,'List1');
lockListItems(tID,'List2');
lockListItems(tID,'List3');
lockListItems(tID,'List4');
}

There is no order required as long as they all execute. However If I wanted to alert after the final code block has executed how do I accomlish this as code runs asyncrounously?

I guess I could repeat the block 4 times and nest in the OnSuccess but this is repeating code. Can the next function be called only when the previous function has been confirmed ?

function lockListItems(tID,varList) {

    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle(varList);

    var camlQuery = new SP.CamlQuery();
    camlQuery.set_viewXml('<View><Query><Where><Eq><FieldRef Name=\'TeamRequest\'/>' + 
        '<Value Type=\'Number\'>'+ tID +'</Value></Eq></Where></Query></View>');
    this.collListItem = oList.getItems(camlQuery);
     this.varList = varList; // add varList so able to pass into next function

    clientContext.load(collListItem);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));        

}

function onQuerySucceeded(sender, args) {


    var listItemInfo = '';

    var listItemEnumerator = collListItem.getEnumerator();


    while (listItemEnumerator.moveNext()) {
        var oListItem = listItemEnumerator.get_current();
        listItemInfo += '\nID: ' + oListItem.get_id() +  '\nTitle: ' + oListItem.get_item('Title');

        UpdateStatusLocked(oListItem.get_id(),varList);


            //ddlDepartment1.add(new Option(oListItem.get_item('Title'), oListItem.get_item('ID')));
                }

    alert(listItemInfo.toString());


}

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}


// -------------------------------------------------------------------------
// UPDATE LIST  ACTION
function UpdateStatusLocked(ID,varList) {

    var clientContext = new SP.ClientContext.get_current();
    var oList = clientContext.get_web().get_lists().getByTitle(varList);

    this.oListItem = oList.getItemById(ID);

    oListItem.set_item('Locked', 'True');

    oListItem.update();

    //clientContext.load(oListItem);

    clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded4), Function.createDelegate(this, this.onQueryFailed4));

}


function onQuerySucceeded4(sender, args) {
//alert ('Updated Locked Status');

}

function onQueryFailed4(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

Answer 1

Promises to the rescue!

(SharePoint front-end developers -meaning, anyone writing code with JSOM- should really start to familiarize with the concept of Promises).

If you wrap your async function in a promise, you can have your loop producing a new promise, push it to an array of promises, then wait for all of them to complete and lastly, run your alert.

Take a look here at an example implementation with the Q library

Answer 2

why don´t you use some variables (a set of booleans or a int with bit flags)? Each function sets ist own value to true (or another value indicating "done"). and starts a verification function. The latter one checks if all are set to true ("done") and if so, it does the alert.

This way you could do this async