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

Question

我正在尝试制作一款游戏。

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

function fullMotion() {

  moveRight(365);

  moveUp(300);

  moveRight(570);

  moveDown(300);

  moveRight(365);

}

问题是，现在角色同时进行所有 5 个动作，我希望他首先向右走，然后在该动作完成后向上，依此类推，直到结束。

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

谢谢。

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

你需要知道动画持续了多少时间，即一秒，所以：function fullMotion() {&nbsp; setTimeout(()=>moveRight(365),0);&nbsp; setTimeout(()=>moveUp(300), 1000);&nbsp; setTimeout(()=>moveRight(570), 2000)&nbsp; setTimeout(()=>moveDown(300), 3000);&nbsp; setTimeout(()=>moveRight(365),4000);}

Answer 2

async function fullMotion() {&nbsp; await moveRight(365);&nbsp; await moveUp(300);&nbsp; await moveRight(570);&nbsp; await moveDown(300);&nbsp; await moveRight(365);}一种是此处实现异步函数的一种方法（请参阅：https ://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function ）