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

循环结束前循环执行代码

1 个答案: