等待动作完成后再开始下一个动作

Question

我正在尝试制作游戏。

我为我的角色可以移动的每个方向制作了一个 function，然后我尝试制作一个 function 通过调用其中的其他函数来让角色走完整个轨道。

function fullMotion() {
  moveRight(365);
  moveUp(300);
  moveRight(570);
  moveDown(300);
  moveRight(365);
}

问题是现在这个角色一次做了所有 5 个动作，我希望他首先向右 go，然后在这个动作之后完成 go 等等直到结束。

我在谷歌上搜索了很多试图找到一种方法，但是对于这样一个简单的问题，我发现的所有解决方案看起来都太复杂了，大多数使用承诺或回调； 我想可能有一个我找不到的超级简单的解决方案。

谢谢。

Movement functions are:

function moveSkeleton0Right(){
    let left = parseInt(window.getComputedStyle(skeleton0).getPropertyValue("left"));
    left += 1;
    skeleton0.style.left = left + "px";
}

function moveRight(i) {
    if (i < 0) return;

    setTimeout(function () {
        moveSkeleton0Right();
        moveRight(--i);

    }, 16);
}

Answer 1

你需要知道多少 animation 最后一秒，所以：

function fullMotion() {
  setTimeout(()=>moveRight(365),0);
  setTimeout(()=>moveUp(300), 1000);
  setTimeout(()=>moveRight(570), 2000)
  setTimeout(()=>moveDown(300), 3000);
  setTimeout(()=>moveRight(365),4000);
}

Answer 2

async function fullMotion() {
  await moveRight(365);
  await moveUp(300);
  await moveRight(570);
  await moveDown(300);
  await moveRight(365);
}

一种是在这里实现异步函数的一种方式（参见： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function ）