Sequencing animation but failed to do it

Concerning the assignment Sequence animation
I am trying to do async await but iterated over.
settimeout seems most logical, but why it won’t work in async await but it will in Promise based?
I solved it with .finish method only after I looked at what others did here on the forum.
here is the link

Hi @netkonetko and welcome to the community :wave:

setTimeout() immediately returns a timeoutID and not a Promise that gets resolved at some point. When you use await in front of a function that returns a “normal” value, await just immediately returns this value and the code doesn’t get paused.

Using the finished property would be the correct way for all three implementations. Although the three animations follow each other, technically they don’t depend on each other when using setTimeout().

I hope that helps. Feel free to ask more questions if something isn’t clear. :slightly_smiling_face:

Have a nice day,
Michael

can you write it async await with setTimeout()? I want to see how it looks like. How do I tie them to each other

I think you’ll need a helper function that returns a Promise and resolves it after some time:

function delay() {
  return new Promise(resolve => setTimeout(resolve, 2000));
}
 
async function functionWithDelay() {
 console.log('I am called immediately');
 await delay();
 console.log('I am called after two seconds');
}

functionWithDelay();

Ok, thank you very much. I managed to do it like I originaly planned after you helped me get through it.

    function delay() {
  return new Promise(resolve => setTimeout(resolve, 2000));
}

async function delayAnimateseq(animations) {
  for (const alice of animations) {
    animate(alice), await delay();
  }
}
delayAnimateseq(allAlice);
1 Like