Assessment wanted for Sequencing animations

task page

my work

my question: in the third part( rewrite using async and await), I know that await returns the right result of an asynchronous operation, so I need to find out the resolved state of the promise—Animation.finished. At first, I tried something like

const pro1 = await alice1.animate(aliceTumbling, aliceTiming).finished;
    if (pro1===fulfilled){

but clearly it doesn’t work out, so I have to change

 const pro1 = await alice1.animate(aliceTumbling, aliceTiming).finished;
if (pro1){
    alice2.animate(aliceTumbling, aliceTiming);
    const pro2 = await alice2.animate(aliceTumbling, aliceTiming).finished;
    if (pro2){
        alice3.animate(aliceTumbling, aliceTiming);
    }

even though the page works out, I do not fully understand the question.

Here
I want to thank the comunity for updating the articles in the asynchronous Javascript module :smiling_face_with_three_hearts:

yeah I noticed that because just 4 or 5 days ago, I read the old articles and become quite confused and fruatrated because I can not understand a lot. So I have to google a lot of materials on the topic, but still I have a lot of questions. Finally, I find that there is a updated version on MDN and it is quite suitable for beginners to understand. So I want to thank the community for that :smiling_face_with_three_hearts:

Also, I find out that to understand the MDN articles on promise is onething, and to complete the assignment is another thing, So maybe the best way to learn promise is to write on your own.

Hello @Austin_Hart

in this code

  1. you check if pro1 is equal to fulfilled but fulfilled is not defined in your code

  2. the fulfilled is state of the promise it’s not a property that mean even
    pro1.fulfilled would not work check this one Promise - JavaScript | MDN

  3. i guess the confustion come from the example of response.ok cause the fetch api Window: fetch() method - Web APIs | MDN reslove to a response object which has ok property Response - Web APIs | MDN

  4. the finished already return when the animate finish it work Animation: finished property - Web APIs | MDN

so the code could be

try {
alice1.animate(aliceTumbling, aliceTiming);
    
const pro1 = await alice1.animate(aliceTumbling, aliceTiming).finished;
    
    
alice2.animate(aliceTumbling, aliceTiming);
        
const pro2 = await alice2.animate(aliceTumbling, aliceTiming).finished;

alice3.animate(aliceTumbling, aliceTiming);
        
  }

i agree promise and async code is confusing other language do so much better way to do it but that how js choose to do it

edit:

  1. try to remove the await and see what happen it will help you know what await is doing

hope that help and let me know if i can explain it in better way and have a nice day :slight_smile:

1 Like