如何让一个函数只有在另一个函数在 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 并且如果我得到一个分数“2”然后直接移动到 8 而不是 6 => 8 。我该如何解决这个问题？。我想演示这两个动作（首先从 4 移动到 6，然后从 6 到 8 的抽吸移动）。我怎样才能做到这一点？

Answer 1

要将pump() 的移动显示为 2 个步骤，您必须让 UI 有时间在 2 个移动之间重新绘制。目前，直到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);
    }
}

延迟不必很长； alert() 将吸引用户的注意力，而圆圈显示在第 6 格。

---

结合你的例子：

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>

Answer 2

您可以通过多种方式来决定要并行还是串行执行函数的天气。如果一个函数依赖于另一个函数，您还可以决定执行顺序。

1. 回调函数： 如上所述，一旦父函数执行完毕，回调函数就会执行。

2. 承诺： 它比回调更高级，您可以设置依赖函数 喜欢

   promise.all(fun1, fun2, ...).then(fun3) promise.when(fun1).then(fun2)

3. 可观察： RxJs observable 也提供了这样的机制，可以探索

如果存在，您可以探索其他选项。

Answer 3

其实你可以给你的javascript函数添加回调，让它按顺序执行。

例如

function pump(param, callback){
    //do something here with your param

    callback();
}

function demotive(param){
    //do something
}

//call the function in order pump, then demotive after pump finishes
pump(1, function(){
    demotive(4);
});

此链接here 也会有所帮助