How do I make sure a block of JavaScript runs after previous block has finished?

Question

I have the following JavaScript code

 function getWorkflowSchemeName(projectKey, callback){ var restCall = AJS.params.baseURL+"/rest/projectconfig/1/workflowscheme/"+projectKey AJS.$.get(restCall, function(response){ if(response != null){ callback(response.name) } console.log("Im in here") }) } pairTypeValues = {} AJS.$.each(AJS.$(".projects-list tr td:nth-child(3)"), function(index, value){ getWorkflowSchemeName(value.innerText, function(workflowSchemeName){ pairTypeValues[value.innerText] = workflowSchemeName }) }) //The following code MUST run after ALL the pairTypeValues are recieved. counter = 1 AJS.$.each(AJS.$(".projects-list tr td:nth-child(3)"), function(ind,val){ AJS.$.each(pairTypeValues, function(index,value){ if(val.innerText == index){ console.log("SUP") AJS.$(".projects-list tr:nth-child("+counter+")").append("<td>"+value+"</td>") } }) counter++ })

I'm making numerous rest calls and saving the responses in PairTypeValues object. (it takes time to get all the data)

The last block of code is responsible for adding the data found in PairTypeValues.

I have tried running the last block separately (instead of single file execution) and it runs fine, because till then all the values are stored in PairTypeValues object. But when I run the code all together, it doesn't print anything.

I've tried doing it with adding another callback but it didn't work:

 function getWorkflowSchemeName(projectKey, callback){ var restCall = AJS.params.baseURL+"/rest/projectconfig/1/workflowscheme/"+projectKey AJS.$.get(restCall, function(response){ if(response != null){ callback(response.name) } console.log("Im in here") }) } function makingPairTypes(anotherCallback){ pairTypeValues = {} AJS.$.each(AJS.$(".projects-list tr td:nth-child(3)"), function(index, value){ getWorkflowSchemeName(value.innerText, function(workflowSchemeName){ anotherCallback(pairTypeValues[value.innerText] = workflowSchemeName) }) }) } counter = 1 AJS.$.each(AJS.$(".projects-list tr td:nth-child(3)"), function(ind,val){ makingPairTypes(function(secondCallback){ AJS.$.each(secondCallback, function(index,value){ if(val.innerText == index){ console.log("SUP") AJS.$(".projects-list tr:nth-child("+counter+")").append("<td>"+value+"</td>") } }) }) counter++ })

I have also tried using Deferred Methods, but that isn't working for me either:

 function makingPairTypes(){ var pairTypeValues = {} AJS.$.each(AJS.$(".projects-list tr td:nth-child(3)"), function(index, value){ getWorkflowSchemeName(value.innerText, function(workflowSchemeName){ pairTypeValues[value.innerText] = workflowSchemeName }) }) } //The following code MUST run after ALL the pairTypeValues are recieved. function addingSchemeNames(){ counter = 1 AJS.$.each(AJS.$(".projects-list tr td:nth-child(3)"), function(ind,val){ AJS.$.each(pairTypeValues, function(index,value){ if(val.innerText == index){ console.log("SUP") AJS.$(".projects-list tr:nth-child("+counter+")").append("<td>"+value+"</td>") } }) counter++ }) } var dm = AJS.$.Deferred(); dm.done([makingPairTypes, addingSchemeNames]);

I just want to make sure that all pairTypeValues are collected before the last block is executed.

Can someone please help me out? I don't want to insert SetTimeOuts in the code.

Many thanks in advance

Answer 1

There are modern solutions like using Promises and Promise.all. But I think what you have there is actually only one piece of logic away from working. You just need to track the running number of responses, updating it in the response callback each time it's executed, and then when you have them all, fire off the final code function from within the response callback.

function getWorkflowSchemeName(projectKey, callback){
    var restCall = AJS.params.baseURL+"/rest/projectconfig/1/workflowscheme/"+projectKey;

    AJS.$.get(restCall, function(response){
        callback(response);
    })
};

pairTypeValues = {};
doneIfZero = AJS.$(".projects-list tr td:nth-child(3)").length;
AJS.$.each(AJS.$(".projects-list tr td:nth-child(3)"), function(index, value){
    getWorkflowSchemeName(value.innerText, function(response){
        var workflowSchemeName = response.name;
        if(workflowSchemeName != null){
            pairTypeValues[value.innerText] = workflowSchemeName;
        }
        doneIfZero--;
        if (doneIfZero === 0) {
            codeToRunAfterAllResponsesAreBack()
        }
    });
});

//The following code MUST run after ALL the pairTypeValues are recieved.
function codeToRunAfterAllResponsesAreBack(){
    counter = 1
    AJS.$.each(AJS.$(".projects-list tr td:nth-child(3)"), function(ind,val){
        AJS.$.each(pairTypeValues, function(index,value){
            if(val.innerText == index){
                AJS.$(".projects-list tr:nth-child("+counter+")").append("<td>"+value+"</td>")
            }
        });
        counter++
    });
};