Sync JS function with for loop

喜欢而已 提交于 2021-02-20 05:10:04

问题


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")
}

回答1:


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);


来源:https://stackoverflow.com/questions/65995540/sync-js-function-with-for-loop

标签
易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!