如何使一個函數在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

其實你可以添加回調到你的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也將有助於

Answer 3

有很多方法，你可以決定要並行或串行執行功能的天氣。如果一個功能依賴於另一個功能，您也可以決定執行順序。

1. 回調函數： 如上所述，回調函數就會執行一次父函數完成它的執行。

2. 承諾： 更先進的那麼回調，你可以設置相關的功能 像

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

3. 可觀察： RxJs觀察到的是還提供這樣的機制，可以探索

其他選項，你可以探討是否存在。