javascript：异步函数问题（带循环的异步等待）

Question

I'm having a problem with a asynchronous function in javascript

My function looks like this:

async function animate(animations) {
  const promises = animations.map(async(element, index) => {
    const arrayBars = document.getElementsByClassName(classes.arrayElement);
    if (element.operation === 'change-color') {
      const [barOneIndex, barTwoIndex] = element.positions;
      const barOneStyle = arrayBars[barOneIndex].style;
      const barTwoStyle = arrayBars[barTwoIndex].style;
      setTimeout(() => {
        barOneStyle.backgroundColor = SECONDARY_COLOR;
        barTwoStyle.backgroundColor = SECONDARY_COLOR;
      }, index * speed);
    }
    if (element.operation === 'revert-color') {
      const [barOneIndex, barTwoIndex] = element.positions;
      const barOneStyle = arrayBars[barOneIndex].style;
      const barTwoStyle = arrayBars[barTwoIndex].style;
      setTimeout(() => {
        barOneStyle.backgroundColor = PRIMARY_COLOR;
        barTwoStyle.backgroundColor = PRIMARY_COLOR;
      }, index * speed);
    }
    if (element.operation === 'swap') {
      setTimeout(() => {
        const [barOneIndex, newHeight] = element.positions;
        const barOneStyle = arrayBars[barOneIndex].style;
        barOneStyle.height = `${newHeight / 1.4}px`;
      }, index * speed);
    }
  });
  await Promise.all(promises);
  console.log('finished');
}

It basically animates a sorting algorithm, here's the link of the project to help you to understand easier : https://divino.dev/Sorting-algorithms-visualizer/

The problem is, I need to know when the animation ends, but everything I tried didn't wait the animations to finish.

Answer 1

I see your .map() function doesn't return any promises. You can fix this with

const promises = animations.map((element, index) => new Promise((resolve, reject) => { 
   const arrayBars = ...
   ...
   resolve();
}))
await Promise.all(promises);
console.log('finished');

Answer 2

For promises to be an array of Promises, the .map() callback needs to return Promise.

For that, you need to promisify setTimeout , for which standard practice is to write a small Promise-returning delay() function.

async function animate(animations) {
    function delay(ms) {
        return new Promise((resolve) => {
            setTimeout(resolve, ms);
        });
    }
    const promises = animations.map(async(element, index) => {
        const arrayBars = document.getElementsByClassName(classes.arrayElement);
        return delay(index * speed).then(() => {
            if (element.operation === 'change-color') {
                const [barOneIndex, barTwoIndex] = element.positions;
                arrayBars[barOneIndex].style.backgroundColor = SECONDARY_COLOR;
                arrayBars[barTwoIndex].style.backgroundColor = SECONDARY_COLOR;
            }
            if (element.operation === 'revert-color') {
                const [barOneIndex, barTwoIndex] = element.positions;
                arrayBars[barOneIndex].style.backgroundColor = PRIMARY_COLOR;
                arrayBars[barTwoIndex].style.backgroundColor = PRIMARY_COLOR;
            }
            if (element.operation === 'swap') {
                const [barOneIndex, newHeight] = element.positions;
                arrayBars[barOneIndex].style.height = `${newHeight / 1.4}px`;
            }
        });
    });
    await Promise.all(promises);
    console.log('finished');
}

Note that, since the delay is the same in all three cases, it's more economical of source code to have delay(index * speed).then(...) as an outer structure and the decision-making if(){...} if(){...} if(){...} as inner structures (or the equivalent or switch/case structure).