Wie kann man eine Funktion nur starten, nachdem eine andere Funktion in JavaScript vollständig abgeschlossen wurde?

Question

In dem untenstehenden Code habe ich versucht, ein Spiel zu erstellen .Wenn Benutzer drücken Sie die Taste jedes Mal, wenn es eine Zufallszahl zwischen 1 bis 3 generiert und fügen Sie es mit der vorherigen Punktzahl (9 ist der Endpunkt). Es gab auch zwei Funktions pump() und demotive() .wenn den Anwender insgesamt Punkt erreichen 6 pump() wird es zum 8. machen, wenn der Benutzer 7 die demotive erreichen() machen es 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>

Aber wenn ich auf 4 stehe und wenn ich eine Punktzahl "zwei" bekomme, dann verschiebe ich direkt auf die 8 statt 6 => 8. Wie kann ich das beheben?. Ich möchte beide Bewegungen demonstrieren (zuerst von 4 nach 6 und dann die gepumpte Bewegung von 6 nach 8 nacheinander). Wie kann ich das erreichen?

Answer 1

Um die Bewegung von pump() als 2 Schritte anzuzeigen, müssen Sie der Benutzeroberfläche Zeit geben, zwischen den 2 Bewegungen neu zu zeichnen. Derzeit wird es nicht bis zum Ende des click-Ereignisses neu gezeichnet, wenn k und der Kreis bereits um 8 sind.

Sie können es mit einer kurzen setTimeout() geben.

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

Die Verzögerung muss nicht lang sein; Die alert() wird die Aufmerksamkeit des Benutzers halten, während der Kreis auf Quadrat 6 zeigt.

---

mit Ihrem Beispiel kombiniert:

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

Eigentlich können Sie Callback zu Ihrer JavaScript-Funktion hinzufügen, so dass es in der Reihenfolge ausgeführt wird.

zum Beispiel

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

Link here auch

Answer 3

helfen Es gibt viele Möglichkeiten sind Sie Wetter entscheiden, können Sie Funktion parallel oder seriell ausgeführt werden soll. Sie können auch die Ausführungsreihenfolge für den Fall festlegen, dass eine Funktion in einer anderen abhängig ist.

1. Rückruffunktion: Wie oben erwähnt, wird die Rückruffunktion ausführen, wenn die übergeordnete Funktion seine Ausführung abzuschließen.

2. Versprechen: Es fortgeschritteneren dann Rückruf ist und Sie können abhängige Funktion wie

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

3. beobachtbare gesetzt: RxJs beobachtbar ist auch ein solcher Mechanismus bietet und kann

werden erkunden

Andere Option, die Sie erforschen können, wenn vorhanden.