javascript - 如何在 JavaScript 中使一个函数仅在另一个函数完全完成后才启动？

Question

在下面的代码中，我尝试创建一个游戏。当用户每次按下按钮时，它将生成一个 1 到 3 之间的随机数，并将其与之前的分数相加(9 是终点)。还有两个函数 pump() 和 demotive() 。如果用户达到总分 6 pump() 将进入第 8 分.如果用户达到 7，demotive() 会将其变为 3。

var k = 0;
document.getElementById("btn").addEventListener("click", function () {

    var num = Math.floor(Math.random() * 100);
    num = num % 3; /*generate a random no between 0 to 2*/
    num = num + 1; /*generate a random no between 1 to 3*/
    //alert(num);/* check the no*/
    document.getElementById("currnt-value").innerHTML = "you get" + num;
    k = k + num;
    var parent = document.getElementById('a' + k);
    var circle = document.getElementById('crcl');
    parent.appendChild(circle);
    pump(k);
    demotive(k);
});

function pump(val) {
    if (val == 6) {
        alert("you get pumped");
        k = 8;
        var parent = document.getElementById('a' + k);
        var circle = document.getElementById('crcl');
        parent.appendChild(circle);
    }
}

function demotive(val) {

    if (val == 7) {
        alert("oh..!!!you are demotived");
        k = 3;
        var parent = document.getElementById('a' + k);
        var circle = document.getElementById('crcl');
        parent.appendChild(circle);
    }
}

html,body{
  width:100%;height:100%;
  }

#board{
  width:300px;
  height:300px;
  border:1px solid #000;
  
  }
#one,#two,#three{
  width:100%;
  height:100px;
  float:left;
  }
.flag-point{
  width:100px;
  float:left;
  height:100%;
  }
#a8,#a2,#a4,#a6 {
  background-color:green;
  }

#crcl{
  width:30px;
  height:30px;
  background-color:red;
  border:1px solid #000;
  border-radius:50%;
  }

<div id="crcl"> </div> <button id="btn">move circle</button><p id="currnt-value"></p> 

<div id="board">
  <div id="one">
    <div id="a9" class="flag-point">9</div>
    <div id="a8" class="flag-point">8</div>
    <div id="a7" class="flag-point">7</div>
  </div>
  <div id="two">
    <div id="a6" class="flag-point">6</div>
    <div id="a5" class="flag-point">5</div>
    <div id="a4" class="flag-point">4</div>
  </div>
  <div id="three">
    <div id="a3" class="flag-point">3</div>
    <div id="a2" class="flag-point">2</div>
    <div id="a1" class="flag-point">1</div>
  </div>
</div>

但是，如果我站在 4 上并且得到“二”分，则直接移至 8 而不是 6 => 8 。我该如何解决这个问题？我想演示这两个 Action (首先从 4 到 6 的 Action ，然后逐一从 6 到 8 的泵动 Action )。我怎样才能实现这一点？

Answer 1

要将 pump() 的运动显示为 2 个步骤，您必须给 UI 时间在两个运动之间重绘。目前，直到 click 事件结束(此时 k 和圆圈已位于 8 处)时，它才会重新绘制。

您可以给它一个简短的时间 setTimeout() .

function pump(val) {
    if (val == 6) {
        setTimeout(function () {
            alert("you get pumped");
            k = 8;
            var parent = document.getElementById('a' + k);
            var circle = document.getElementById('crcl');
            parent.appendChild(circle);
        }, 10);
    }
}

延迟不必太长；当圆圈显示在方 block 6 上时，alert() 将吸引用户的注意力。

<小时/>

结合您的示例:

var k = 0;
document.getElementById("btn").addEventListener("click", function () {

    var num = Math.floor(Math.random() * 100);
    num = num % 3; /*generate a random no between 0 to 2*/
    num = num + 1; /*generate a random no between 1 to 3*/
    //alert(num);/* check the no*/
    document.getElementById("currnt-value").innerHTML = "you get" + num;
    k = k + num;
    var parent = document.getElementById('a' + k);
    var circle = document.getElementById('crcl');
    parent.appendChild(circle);
    pump(k);
    demotive(k);
});

function pump(val) {
    if (val == 6) {
        setTimeout(function () {
            alert("you get pumped");
            k = 8;
            var parent = document.getElementById('a' + k);
            var circle = document.getElementById('crcl');
            parent.appendChild(circle);
        }, 200);
    }
}

function demotive(val) {

    if (val == 7) {
        alert("oh..!!!you are demotived");
        k = 3;
        var parent = document.getElementById('a' + k);
        var circle = document.getElementById('crcl');
        parent.appendChild(circle);
    }
}

html,body{
  width:100%;height:100%;
  }

#board{
  width:300px;
  height:300px;
  border:1px solid #000;
  
  }
#one,#two,#three{
  width:100%;
  height:100px;
  float:left;
  }
.flag-point{
  width:100px;
  float:left;
  height:100%;
  }
#a8,#a2,#a4,#a6 {
  background-color:green;
  }

#crcl{
  width:30px;
  height:30px;
  background-color:red;
  border:1px solid #000;
  border-radius:50%;
  }

<div id="crcl"> </div> <button id="btn">move circle</button><p id="currnt-value"></p> 

<div id="board">
  <div id="one">
    <div id="a9" class="flag-point">9</div>
    <div id="a8" class="flag-point">8</div>
    <div id="a7" class="flag-point">7</div>
  </div>
  <div id="two">
    <div id="a6" class="flag-point">6</div>
    <div id="a5" class="flag-point">5</div>
    <div id="a4" class="flag-point">4</div>
  </div>
  <div id="three">
    <div id="a3" class="flag-point">3</div>
    <div id="a2" class="flag-point">2</div>
    <div id="a1" class="flag-point">1</div>
  </div>
</div>