Hello Need assessment for Sequencing animations task.
Codepen:
1 version (callback hell).
2 version (promises chain).
3 version (async
/await
).
Hello Need assessment for Sequencing animations task.
Codepen:
1 version (callback hell).
2 version (promises chain).
3 version (async
/await
).
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.
Have a nice day,
Michael
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));
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();
Nice idea of building a function returning a promise to make the code cleaner.
I see you completely understood the concepts of asynchronous JavaScript.
I was googling for more than an hour and the solution was upsetting simple
I know that feeling.