Sync JS function with for loop

Question

I would like to wait until a for loop is finished to continue with my function. I can't seem to get it to work. Hello is always logged before the for loop finishes. Why is this, and what would be a way to run only when the for loop has finished. I need to wait for the for loop to finish before continuing within the function, but outside the for loop.

I want to know how to wait until a for loop is finished, and then execute code. Not set timeouts within the for loop.

function doMergeAnimations(animations){
    for (let i = 0; i < animations.length; i++) {
        const arrayBars = document.getElementsByClassName('array-bar');
        const isColorChange = i % 3 !== 2;
        if (isColorChange) {
            const [barOneIdx, barTwoIdx] = animations[i];
            const barOneStyle = arrayBars[barOneIdx].style;
            const barTwoStyle = arrayBars[barTwoIdx].style;
            const color = i % 3 === 0 ? INITCOLOR : SWAPCOLOR;
            setTimeout(() => {
            barOneStyle.backgroundColor = color;
            barTwoStyle.backgroundColor = color;
            }, i * animationSpeed);
        } else {
            setTimeout(() => {
            const [barOneIdx, newHeight] = animations[i];
            const barOneStyle = arrayBars[barOneIdx].style;
            barOneStyle.height = `${newHeight}px`;
            }, i * animationSpeed);
        }
    }
    console.log("Hello")
}

"I want to know how to wait until a for loop is finished, and then execute code"—so just put the code you want to run after the for loop after the for loop? — ChrisGPT was on strike, Feb 01 '21 at 21:33

Caleb · Accepted Answer · 2021-02-02T06:13:53.567

I want to know how to wait until a for loop is finished, and then execute code.

The simple answer is that you just put your code after the for loop. For example, the line:

console.log("Hello")

is already executing after the for loop finishes. The reason that it doesn't look that way to you is that your loop introduces blocks of code that run asynchronously, like:

setTimeout(() => {
    barOneStyle.backgroundColor = color;
    barTwoStyle.backgroundColor = color;
    }, i * animationSpeed);

The setTimeout function causes some other function to be executed after some number of milliseconds, in this case i * animationSpeed milliseconds. So the for loop executes some number of times, schedules these asynchronous blocks to run later, and then finishes. Your console.log command then runs, and then at some later point those scheduled blocks execute.

It looks like you're using the async blocks to schedule visual changes to run asynchronously because if you ran them synchronously they'd happen so fast that you'd never see them. If you're going to continue with that style, and you want your log message (or anything else) to run after the animations, then you'll need to schedule another block to run after the others. That might mean e.g. calculating the maximum delay used in the loops, e.g. animations.length * animationSpeed and maybe adding 1:

setTimeout(( => {
    console.log("Hello");
    }, animations.length * animationSpeed + 1);

Sync JS function with for loop

1 Answers1

Linked