How to handle alternating asynchronous functions in a while loop?

Question

I just started using JavaScript in a web context and I can't quite wrap my head around callback functions yet, but I think in my current scenario I will need one (or more?).

I have two functions that need to run in an alternating order over and over until a certain condition is met (the condition itself depends on function2 changing a global variable in a certain way, not sure if that's relevant).

So initially I tried this:

while(condition !== true) {
  function1();
  function2();
}

However, this does not work since both (!) functions make use of a setInterval function to handle an animation each and so the while loop executes everything way too fast and does not wait for the functions to finish. Now I learned that supposedly I need to use a callback function in my function. However, since function2() needs to wait for function1() and function1() needs to wait for function2() after that, I don't quite get how to use callbacks here, since I think this would need some sort of infinite callback chain.

If this helps, with pseudo-code, at the moment the entire setup looks like this (let's assume it waits for a global variable to reach a certain index):

var myGlobalCounter = 0;

while(myGlobalCounter < 8) {
  doSomeStuff(400);
  doSomeMoreStuff(400);
}


function doSomeStuff(targetCount) {
  // first function that needs setInterval
  var localCount = 0;

  myInterval = setInterval(function(){
    if (localCount !== targetCount) {
        count += 1;
        // animation happening here
    } else {
      clearInterval(myInterval);
    }
  },20);
}

function doSomeOtherStuff(targetCount) {
  // second function that needs setInterval and alters the global counter
  var localCount = 0;

  myInterval = setInterval(function(){
    if (localCount !== targetCount) {
        localCount += 1;
        // another animation happening here
        myGlobalCounter += 1;
    } else {
      clearInterval(myInterval);
    }
  },20);
}

How can I fix this setup? Keep in mind that I am very much a beginner and I would like a solution in plain JavaScript as I have managed to avoid jQuery for the rest of the project so far and am interested in the underlying logic of using callbacks in a while loop.

Anthony · Accepted Answer · 2017-08-10 20:51:27Z

2

To alternate two functions based on a condition.You can pass the condition and functions to each other.

function function1(condition, otherFunction) {
    // code
    if(!condition) otherFunction(condition, function1);
}

function function2(condition, otherFunction) {
    // code
    if(!condition) otherFunction(condition, function2);
}

edited Aug 10, 2017 at 20:51

answered Aug 10, 2017 at 15:59

Anthony

1,8772 gold badges18 silver badges30 bronze badges

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

1 Comment

mdomino Over a year ago

Thank you, this works perfectly. So much easier than the weird solutions I was considering!

Collectives™ on Stack Overflow

How to handle alternating asynchronous functions in a while loop?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related