I'm new to javascript, so please bear with me. I'm trying to build a processing pipeline via a for loop where each iteration calls a different function that contains a jquery ajax call, based on the contents of the iterable element in the loop definition. The problem is that I need each iteration to wait until the ajax call completes before proceeding to the next loop because sometimes the results of the call may be required for the next loop. What I've built so far appears to just loop through the iterable instantaneous without waiting for the internal function to complete.
Can anyone help?
Here's a simplified version of my code:
var pipe_order = ['C', 'A', 'B'] // this is user-defined, order can change
function runProcessA() {
var data = { "some_data": some_data }
$.ajax({
type: 'POST',
contentType: 'application/json',
url: '/run_ProcessA',
data: data,
success: (response) => {
// return message for pipeline functionality
var pipe_step_response = 'ProcessA Step Complete.'
return pipe_step_response;
}
});
}
////////////////
// FOR SAKE OF SIMPLICITY, assume runProcessB() & runProcessC()
// are mostly identical to runProcessA()
////////////////
function runPipeline(pipe_order) {
let index = 1;
for (const process of pipe_order) {
console.log('Pipeline beginning: Step ' + index);
var step_complete = false;
if (process==='A') {
var step_complete = runProcessA(process);
} else if (process==='B') {
var step_complete = runProcessB(process);
} else if (process==='C') {
var step_complete = runProcessC(process);
}
// record that the process is finished
console.log(step_complete)
console.log('Pipeline finished: Step ' + index);
// increment the index
index++;
}
}
Whenever I call runPipeline(), it just instantly completes the entire for loop without waiting for a value to be returned from the internal runProcess_() functions that are being called. How do I make it wait?