循环后的代码在循环结束前执行

Question

我正在努力提高我的编码技能，并想出了一个要完成的项目。它目前是一个程序，您可以使用按钮选择多达 5 个方向选项。按下方向按钮会将该方向添加到数组中。我创建了一个函数 startMove() 来根据数组中的方向在屏幕上移动一个球。执行时，程序一次将球向一个方向移动，同时在其间暂停。我还有一个部分，您输入的每个方向都会显示一个箭头，以显示您排队的内容。您可以通过JSFiddle查看。

var startMove = function() {
for(var j=0;j<queue.length;j++) {
    spot = queue[j];
    if(spot=="left") {
        (function (j) {
            setTimeout(function () {
                switch(j) {
                    case 0:
                        document.getElementById("one").style.transform = "scale(1.5)";
                        break;
                    case 1:
                        document.getElementById("two").style.transform = "scale(1.5)";
                        break;
                    case 2:
                        document.getElementById("three").style.transform = "scale(1.5)";
                        break;
                    case 3:
                        document.getElementById("four").style.transform = "scale(1.5)";
                        break;
                    case 4:
                        document.getElementById("five").style.transform = "scale(1.5)";
                        break;
                    default:
                        console.log("Length is zero.");
                        break;
                }
                moveCharacter(left);
                console.log("X: "+character.x);
                console.log("Y: "+character.y);
            }, 1000*j);
        })(j);
    }
    else if(spot=="right") {
        (function (j) {
            setTimeout(function () {
                switch(j) {
                    case 0:
                        document.getElementById("one").style.transform = "scale(1.5)";
                        break;
                    case 1:
                        document.getElementById("two").style.transform = "scale(1.5)";
                        break;
                    case 2:
                        document.getElementById("three").style.transform = "scale(1.5)";
                        break;
                    case 3:
                        document.getElementById("four").style.transform = "scale(1.5)";
                        break;
                    case 4:
                        document.getElementById("five").style.transform = "scale(1.5)";
                        break;
                    default:
                        console.log("Length is zero.");
                        break;
                }
                moveCharacter(right);
                console.log("X: "+character.x);
                console.log("Y: "+character.y);
            }, 1000*j);
        })(j);
    }
    else if(spot=="up") {
        (function (j) {
            setTimeout(function () {
                switch(j) {
                    case 0:
                        document.getElementById("one").style.transform = "scale(1.5)";
                        break;
                    case 1:
                        document.getElementById("two").style.transform = "scale(1.5)";
                        break;
                    case 2:
                        document.getElementById("three").style.transform = "scale(1.5)";
                        break;
                    case 3:
                        document.getElementById("four").style.transform = "scale(1.5)";
                        break;
                    case 4:
                        document.getElementById("five").style.transform = "scale(1.5)";
                        break;
                    default:
                        console.log("Length is zero.");
                        break;
                }
                moveCharacter(0, up);
                console.log("X: "+character.x);
                console.log("Y: "+character.y);
            }, 1000*j);
        })(j);
    }
    else if(spot=="down") {
        (function (j) {
            setTimeout(function () {
                switch(j) {
                    case 0:
                        document.getElementById("one").style.transform = "scale(1.5)";
                        break;
                    case 1:
                        document.getElementById("two").style.transform = "scale(1.5)";
                        break;
                    case 2:
                        document.getElementById("three").style.transform = "scale(1.5)";
                        break;
                    case 3:
                        document.getElementById("four").style.transform = "scale(1.5)";
                        break;
                    case 4:
                        document.getElementById("five").style.transform = "scale(1.5)";
                        break;
                    default:
                        console.log("Length is zero.");
                        break;
                }
                moveCharacter(0, down);                    
                console.log("X: "+character.x);
                console.log("Y: "+character.y);
            }, 1000*j);
        })(j);
    }
}
//removeAll();

};

目前该程序几乎可以完美运行。我什至有它，这样箭头在执行时会变大。上面的部分是问题所在。我想编辑 startMove() 函数，以便它做的最后一件事是再次隐藏所有图像并清除数组。我已经有一个函数，removeAll()。我在 startMove() 函数的最后添加了对 removeAll() 函数的调用，但是当我运行程序，排队我的选项并执行时，球按预期移动，但箭头在第一个之后消失移动。为什么 removeAll() 在移动完成之前运行？它不能识别我包含的停顿吗？

任何帮助将不胜感激。我还有很多东西要学，所以如果我的代码中的其他任何东西可以做得更好，我也很想听到关于这方面的反馈。我目前对 removeAll() 的调用已注释掉，因此您可以查看没有它的代码如何运行。它是 javascript 的最后几行之一。

Answer 1

问题是因为您的暂停实际上是单独进程的延迟执行。 setTimeout 接受回调（函数）作为第一个参数。它等待第二个参数指定的毫秒数，然后然后调用回调函数。但它以非阻塞方式做到这一点。

setTimeout(() => console.log("Hello"),5000); // waits 5 seconds then prints 'Hello'
console.log(" World!") // prints ' World' right after the timeout has been set.
// but without waiting the five seconds.

可以把它想象成设置一个计时器，将饼干从烤箱中取出，然后在等待时倒一杯牛奶，或者在代码中。

setTimeout(takeCookiesOutOfOven, 30000);
pourGlassOfMilk(); //You don't need to wait for the cookies to do this, so you just do it.

如果您想在执行下一行代码之前等待暂停，请在此处查看 async/await 并承诺对 setTimeout 所做的修改：Combination of async function + await + setTimeout