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?

@CertainPerformance : please see my update on how to return values : can i call the next function using : callback(parameter) — sqlchild
– sqlchild, Commented Apr 4, 2018 at 7:10

brk · Accepted Answer · 2018-04-04 07:18:44Z

2

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>

edited Apr 4, 2018 at 7:18

answered Apr 4, 2018 at 7:11

brk

50.3k10 gold badges59 silver badges85 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

sqlchild Over a year ago

is returning a value from StepTWO to StepTHREE possible ?

sqlchild Over a year ago

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

Michael Geary · Accepted Answer · 2018-04-04 07:28:38Z

0

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.

edited Apr 4, 2018 at 7:28

answered Apr 4, 2018 at 7:25

Michael Geary

29k9 gold badges67 silver badges77 bronze badges

9 Comments

sqlchild Over a year ago

So you mean that Promises & Deferred objects are for far more complex chaining ???

sqlchild Over a year ago

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 Over a year ago

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 Over a year ago

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 Over a year ago

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

|

Collectives™ on Stack Overflow

Javascript executing multiple functions in sequence

2 Answers 2

2 Comments

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related