Question

在下面的代码中，我尝试创建一个游戏。当用户每次按下按钮时，它会生成1到3之间的随机数，并将其与之前的分数相加（9是结束点）。还有两个函数pump()和demotive()。如果用户达到总点数6 pump()将使其达到8.如果用户达到7，则降级（）使其为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 =＆gt; 8。我该如何解决这个问题？我想展示两种动作（首先从4移动到6，然后逐个从6移动到8）。我怎样才能实现这一目标？

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);
    }
}

延迟并不长;当圆圈显示在方块6上时，alert()将引起用户的注意。

结合您的示例：

＆＃13;

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);
    }
}

＆＃13;

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%;
  }

＆＃13;

<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>

＆＃13;

Answer 2

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

回拨功能：如上所述，一旦父函数完成执行，回调函数就会执行。
承诺：它比回调更先进，你可以设置依赖功能像

promise.all(fun1, fun2, ...).then(fun3) promise.when(fun1).then(fun2)
可观察： 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也会有所帮助

如何在JavaScript中完全完成另一个函数后启动函数？

3 个答案: