Javascript executing multiple functions in sequence

Question

I have 3 functions StepONE, StepTWO, StepTHREE to run them in sequence. Is this the correct way to run in sequence :

Also, on using StepTWO(StepTHREE()); the sequence goes wrong, so I did this to make it work : StepTWO(function() { StepTHREE() });

<div id="stepslog"></div>
<div id="count"></div>
<button onclick="Steps()">Start </button>
<script>
 function Steps() {
 StepONE(function() {
 <!-- StepTWO(StepTHREE()); -->
 StepTWO(function() {
 StepTHREE()
 });
 alert('FINISHED WITH BOTH STEPS');
 });
}
function StepONE(callback) {
 <!-- alert('Step ONE'); -->
 document.getElementById('stepslog').innerHTML += '<hr>Step ONE';
 for (i = 1; i < 700; i++) {
 var abc = document.getElementById("count");
 abc.innerHTML += '<br>' + i;
 }
 callback(itemexists);
}
function StepTWO(callback, itemexists) {
 <!-- alert('Step TWO'); -->
 document.getElementById('stepslog').innerHTML += '<hr>Step TWO';
 callback();
}
function StepTHREE() {
 document.getElementById('stepslog').innerHTML += '<hr>Step THREE';
}
</script>

UPDATE :

How do I return values from function 2 & 3 and use it finally in StepONE() function ? callback(itemexists)....is this correct?

• reeversedev: Why don't you try the scenario with 'Promises'?
• sqlchild: @Nina Scholz : thanks :)
• CertainPerformance: Bit nicer with StepONE(() => StepTWO(() => StepTHREE))
• sqlchild: @CertainPerformance : please see my update on how to return values : can i call the next function using : callback(parameter)

Answer 1

Try using Promise.resolve and chain the rest of the functions

function Steps() {
 Promise.resolve(StepONE()).then(function(x) {
 console.log('From 1st function ', x);
 return StepTWO();
 }).then(function(y) {
 console.log('From 2nd function ', y);
 StepTHREE();
 })
}
function StepONE() {
 document.getElementById('stepslog').innerHTML += '<hr>Step ONE';
 for (i = 1; i < 700; i++) {
 var abc = document.getElementById("count");
 abc.innerHTML += '<br>' + i;
 }
 return 'Return from ONE';
}
function StepTWO() {
 document.getElementById('stepslog').innerHTML += '<hr>Step TWO';
 return 'Return from TWO';
}
function StepTHREE() {
 document.getElementById('stepslog').innerHTML += '<hr>Step THREE';
}

<div id="stepslog"></div>
<div id="count"></div>
<button onclick="Steps()">Start </button>

• sqlchild: is returning a value from StepTWO to StepTHREE possible ?
• sqlchild: thanks a lot :) but I need to multiply the param by 2 in StepTWO & then return this value to StepTHREE where multiply it by 3 and then print in StepONE

Answer 2

You're making this way too complicated.

If you want to run three functions in sequence, one after the other, just write the calls in sequence:

stepOne();
stepTwo();
stepThree();

That will call the three functions listed, one after the other. Each function will fully complete its execution before the next function is called.

This is the normal and expected way to run JavaScript functions. You don't need callbacks, or promises, or any of that. Just call the functions.

Regarding your update, if you need to return a value from one function and then pass that value to another function, simply do exactly that:

let valOne = stepOne();
let valTwo = stepTwo( valOne );
stepThree( valTwo );

Now if you're dealing with server requests, or anything else asynchronous, that is a different story. But nothing in your question indicates this. Sequential execution is the normal way that JavaScript works, so just use it unless you need something different.

• sqlchild: So you mean that Promises & Deferred objects are for far more complex chaining ???
• sqlchild: I am checkiing OAuth Login in StepONE & TWO in my actual code, this being the pseudo code, if logged in via FB then go to welcome page else check Google login, if not logged in via Google also, then check personal login
• Michael Geary: Promises and callbacks are for asynchronous code. For example, when you make a request to a server, the response will not come back immediately. So you use a callback or a promise (which also uses a callback) to handle the response that comes back later.
• Michael Geary: Ah, well, if you are handling OAuth logins, then you do indeed have to deal with asynchronous code. This wasn't mentioned in your question, so I was just answering what you asked, not what you didn't ask. ;-)
• sqlchild: But I won't proceed my app to STEPTWO, if StepONE (FB Login check) ain't complete.......so that means its synchronous isn't it?? if FB Login says false, then it goes to Google Login checker STEPTWO and so on