Assessment wanted for Sequencing Animations assignment

MDN Learn
#1

Hello.

Assignment instructions link.

Link to codepen with my code. (the three versions of the solution are separated by comments).

There are some things I still don’t understand. For instance, the use of the response parameter. I used anonymous functions inside the .thens and it still works.

I made it work in general but I still don’t fullt grasp what’s going on, which I guess might reflect in my code.

#2

Hi @robmdnnyc

Very well done! I had a look at all three version and you wrote good code. :+1:

You could make the second version simpler by removing the return keyword and the curly braces. This works because when having an arrow function the last statement executed is automatically the return value and when you have only one statement you don’t need curly braces.

alice1.animate(aliceTumbling, aliceTiming).finished
  .then(() => alice2.animate(aliceTumbling, aliceTiming).finished)
  .then(() => alice3.animate(aliceTumbling, aliceTiming).finished)
  .catch(error => console.error(`Error animating Alices: ${error}`));

Version 3 could be made easier because we don’t need the resolved value but just need to wait until the promise is fulfilled (as explained in the other post).

async function animateAlices() {
  try {
    await alice1.animate(aliceTumbling, aliceTiming).finished;
    await alice2.animate(aliceTumbling, aliceTiming).finished;
    await alice3.animate(aliceTumbling, aliceTiming).finished;
  }
  catch (error) {
    console.error(`Error animating Alices: ${error}`);
  }
}

animateAlices();

Now that you have coded all three version, I’m interesting in knowing which version do you like the most? Which were you most comfortable with?

Happy coding,
Michael

1 Like
#3

Thanks for the review.

I think I like both the chained promises and the async-await one. Would need more experience to decide between those two.

2 Likes