Assessment wanted for Sequencing animations task

MDN Learn
#1

Hello :slightly_smiling_face: Need assessment for Sequencing animations task.

Codepen:
1 version (callback hell).
2 version (promises chain).
3 version (async/await).

1 Like
#2

Hi @VladimirK

Excellent code. I have nothing to complain.
Nice idea to use a function with callback for version 1 to make the mess a bit more readable. :grin:

Have a nice day,
Michael

1 Like
#3

Thank you for your solution Vova. I solved task 2 with creating a new promise inside a function and then just sequenced the function with each of alice’s:

function alicesAnimate(alice) {

return new Promise(function (resolve, reject) {
const animation = alice.animate(aliceTumbling, aliceTiming);

resolve(animation.finished);

})
}

alicesAnimate(alice1)
.then(() => alicesAnimate(alice2))
.then(() => alicesAnimate(alice3));

2 Likes
#4

And here is my solution for Task 3. I just “async-awaited” function alicesAnimate (from task 2) 3 times with different arguments. Seems to be short-coded, elegant, and more readable:

    function alicesAnimate(alice) {
return new Promise(function (resolve, reject) {
const animation = alice.animate(aliceTumbling, aliceTiming);

resolve(animation.finished); 
})
}

async function allAlices() {
    await alicesAnimate(alice1);
    await alicesAnimate(alice2);
    await alicesAnimate(alice3);
}

allAlices();
1 Like
#5

Nice idea of building a function returning a promise to make the code cleaner.
I see you completely understood the concepts of asynchronous JavaScript. :slightly_smiling_face:

2 Likes
#6

I was googling for more than an hour and the solution was upsetting simple

2 Likes
#7

I know that feeling. :grin:

1 Like