SP2013 - Failed to call, back to back executeQueryAsync() functions

Question

This is exactly what I want to accomplish, given below are the steps I'm performing.

1. Update sub task status based on subTaskId (SP Task List), using executeQueryAsync()
2. Get all sub tasks based on taskId using SP REST API
3. Based on all sub task status accordingly update task status using executeQueryAsync()

Problem statement : Here I'm dealing with back to back async function calls and in 2nd step I'm not getting the latest updated sub-tasks status. REST API gives me old sub task status and hence task status gets wrongly updated. Here's sample code structure :

calling function(){
    saveSubTaskStatus(subTaskId);
    fetchAllSubTasks();   //REST api
    updateTaskStatusAccordingly(taskId);
}

saveSubTaskStatus(subTaskId){
        clientContext.executeQueryAsync(
            Function.createDelegate(this, this.onQuerySucceeded),
            Function.createDelegate(this, this.onQueryFailed)
        );
}
function onQuerySucceeded(sender, args) {
    //fetchAllSubTasks();  //REST api
    //Some business logic
    //updateTaskStatusAccordingly(taskId);
}

function updateTaskStatusAccordingly(taskId){
        clientContext.executeQueryAsync(
            Function.createDelegate(this, this.onQuerySucceeded),
            Function.createDelegate(this, this.onQueryFailed)
        );
}

Executing on call back functions is not working. I've not tried deferred/Promises JavaScript.

Other then this is there any other approach to accomplish the above tasks.

Answer 1

Your code does exactly what it is told to do.

Problem is this runs async, so taskId inside your onQuerySucceeded is the taskId of the calling function.

when Tasks A and B have been issued and subtask A1 returns, taskId will be B

When you instruct SP to go and fetch Task A subtasks, you have to tell it they belong (are bound) to Task A and not rely on global variables.

That way when the answer returns you know which Task they belong to.

Read:

• Differing ways to make executeQueryAsync calls - Function.createDelegate (is old IE8 code)

• Query multiple lists using javascript/CSOM

Your code should look something like this: note, there are some logic errors in here, but I do not know your full code

calling function(){
    saveSubTaskStatus(subTaskId);
    updateTaskStatusAccordingly(taskId);
}

saveSubTaskStatus(subTaskId){
    clientContext.executeQueryAsync(
            onQuerySucceeded.bind(subTaskId),
            onQueryFailed
        );
}
function onQuerySucceeded(sender, args) {
    var taskId=this;//can be both a taskid and a subtaskid!! because called from 2 queries!!
    updateTaskStatusAccordingly(taskId);
    }

function updateTaskStatusAccordingly(taskId){
    clientContext.executeQueryAsync(
            onQuerySucceeded.bind(taskId),
            onQueryFailed
        );
}

Promises would make the code cleaner because it is easier to wait for all Subtasks to be processed but you have to be aware of the same context issues. But for this approach Promises would require more boilerplate code.

Callbacks or Promises, you have to master them both.