等待動作完成后再開始下一個動作

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 ）