我正在努力提高我的编码技能,并想出一个完成的项目。它目前是一个程序,您可以使用按钮选择最多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的最后一行。
答案 0 :(得分:0)
问题是因为您的暂停,实际上是延迟执行单独的进程。 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