用for循环同步JS函数

Question

我想等到for循环完成后再继续执行我的函数。我似乎不能使它工作。总是在for循环结束之前记录Hello。为什么会这样，以及只有在for循环结束时才运行的方法是什么。我需要等待for循环完成，然后再继续在函数内，但在for循环之外。

我想知道如何等待，直到一个for循环完成，然后执行代码。没有在for循环中设置超时。

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

Answer 1

我想知道如何等待直到for循环完成，然后执行代码。

简单的答案是，您只需将代码放在for循环之后。例如，

这一行

console.log("Hello")

已经在for循环结束后执行。在您看来不是这样的原因是您的循环引入了异步运行的代码块，例如:

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

setTimeout函数导致一些其他函数在一些毫秒数后执行，在本例中是i * animationSpeed毫秒。因此，for循环执行一些次数，安排这些异步块稍后运行，然后结束。然后运行console.log命令，然后在稍后的某个时间点执行那些已调度的块。

看起来你正在使用异步块来安排视觉变化以异步运行，因为如果你同步运行它们，它们会发生得如此之快，以至于你永远不会看到它们。如果您打算继续使用这种样式，并且您希望日志消息(或其他任何内容)在动画之后运行，那么您需要安排另一个块在其他块之后运行。这可能意味着计算循环中使用的最大延迟，例如animations.length * animationSpeed，并可能添加1:

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