Recursive setTimeout in recursive setTimeout

Question

I create animations, they are time-bound. One follows the other. I need a completely different animation to start at the moment of one animation, which is not related to the first one, and the first cycle of animations waits for the end of the second cycle and only then continues to work further.

I decided to implement this through a recursive set of Timers, but the problem is that the first animation cycle rejects the second animation cycle and prevents the second cycle from completing correctly. That is, they work out of sync. How can I make the first cycle wait for the second one to end?

var func = function(i){

return function(){
    if (i >= 5) return;
    console.log("turn no. " + i);

    // running second recursion 
    var func2 = function(i_){

        return function(){
            if (i_ >= 75) return;
            console.log("turn no2. " + i_);
    
            if(i_ >= 75) {
                console.log('2 Player won');
            } else {
                setTimeout(func2(++i), 2000); 
            }
    
        }   
    }
    setTimeout(func2(0), 2000); 
    // end running second recursion

    if(i >= 5) {
        console.log('1 Player won');
    } else {
        setTimeout(func(++i), 100); 
        }

    }   
}

setTimeout(func(0), 100);

thanks a lot in advance)
desired final output:
turn no. 0
turn no2. 0
turn no2. 1
turn no2. 2
turn no2. 3
turn no2. 4
turn no2. 5
2 Player won
turn no. 1
turn no2. 0
turn no2. 1
turn no2. 2
turn no2. 3
turn no2. 4
turn no2. 5
2 Player won
turn no. 2
turn no2. 0
turn no2. 1
turn no2. 2
turn no2. 3
turn no2. 4
turn no2. 5
2 Player won
turn no. 3
turn no2. 0
turn no2. 1
turn no2. 2
turn no2. 3
turn no2. 4
turn no2. 5
2 Player won
turn no. 4
turn no2. 0
turn no2. 1
turn no2. 2
turn no2. 3
turn no2. 4
turn no2. 5
2 Player won
turn no. 5
turn no2. 0
turn no2. 1
turn no2. 2
turn no2. 3
turn no2. 4
turn no2. 5
2 Player won
1 Player won
p.s. what i want is it generally possible?)))
p.s.s i just need to somehow do two related animations with time dependency

tarkh · Accepted Answer · 2020-08-28 15:37:44Z

1

Is this your expected behaviour? I've corrected the game logic you implemented and put 5 times counter everywhere instead of 75 times for simplicity and quicker test run. Also modified the way function is called from timeouts - added parameter which must be passed to your functions after milliseconds number.

var func = function(i){
  console.log("turn no. " + i);
  var func2 = function(i_){
    console.log("turn no2. " + i_);
    if(i_ >= 5) {
      // If reach limit - end second recursion
      console.log('2 Player won');
      return;
    } else {
      // Launch new cycle in second recursion
      setTimeout(func2, 500, ++i_);
    }
  }
  // Run second recursion
  setTimeout(func2, 500, 0);
  if(i >= 5) {
    // If reach limit - end first recursion
    console.log('1 Player won');
    return;
  } else {
    // Launch new cycle in first recursion
    setTimeout(func, 3000, ++i); 
  } 
}

// When setting timeout function you can pass arguments
// to your function after milliseconds number,
// 3rd+ parameter, like this
//
// Run first recursion
setTimeout(func, 3000, 0);

Anyway, setTimeout will eventually run in parallel, so if your point is to create async code, where one function must wait for another - it's better to use async/await and promises, because they was made exactly for this. Check code below and read comments

// Set pause function
const timeout = (ms) => new Promise(resolve => setTimeout(resolve, ms));
// Set main async function
const main = async () => {
  // Settings
  let no1t = 5;
  let no2t = 5;
  // No1 function
  let i1 = 0;
  const no1 = () => {
    return new Promise(async (resolve, reject) => {
      console.log(`No1: ${i1}`);
      // Run no 2 and wait untill it will be resolved
      await no2();
      // Print that cycle completed
      console.log(`No1: ${i1} completed!`);
      // Wait a sec
      await timeout(1000);
      // If cycles not finished yet, run recursion
      if(i1 < no1t) {
        i1++;
        i2 = 0;
        await no1();
      }
      // Resolve promise after all
      resolve();
    });
  };
  
  // No2 function
  let i2 = 0;
  const no2 = () => {
    return new Promise(async (resolve, reject) => {
      console.log(`-No2: ${i2}`);
      // Wait
      await timeout(500);
      // If cycles not finished yet, run recursion
      if(i2 < no2t) {
        i2++;
        await no2();
      } else {
        // Print that cycle completed
        console.log(`-No2: completed!`);
      }
      // Resolve promise after all
      resolve();
    });
  }
  // Run no1 and wait untill it finishes
  await no1();
  // Log completed
  console.log(`Everything completed`);
}
// Run program
main();

edited Aug 28, 2020 at 15:37

answered Aug 28, 2020 at 13:34

tarkh

2,5691 gold badge11 silver badges14 bronze badges

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

6 Comments

Serafim Over a year ago

nearly). I get the problem that I can not pause the first cycle and it continues to work without waiting for the end of the second. now I will show what the conclusion should be(). turn no. 0 -> turn no2. 0 -> turn no2. 1 -> turn no2. 2 -> turn no2. 3 -> turn no2. 4 -> turn no2. 5 -> 2 Player won turn no. 1 -> turn no2. 0 -> turn no2. 1 -> turn no2. 2 -> turn no2. 3 -> turn no2. 4 -> turn no2. 5 -> 2 Player won turn no. 2 -> turn no2. 0 -> turn no2. 1 -> turn no2. 2 -> turn no2. 3 -> turn no2. 4 -> turn no2. 5 -> 2 Player won ... like this)

Serafim Over a year ago

but now it turns out that the first one starts a new cycle without waiting for the end of the second. something like that(

tarkh Over a year ago

@DimiSoso I've added comments to my code, you can look at them. Seems like my example doing exactly what you talking about. Or if I missed some moment - please point to it... First cycle waiting for second to complete 5 times then starts new one

Serafim Over a year ago

all right, you understood the problem correctly), but we also have a problem with the work of loops, they cannot wait for one second, now I will change the main question and the code to make it clearer)

tarkh Over a year ago

@DimiSoso check my update answer with async/await implementation

|

Collectives™ on Stack Overflow

Recursive setTimeout in recursive setTimeout

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related