How to make a function start only after another function fully completed in JavaScript?

Question

In the below code I'm tried create a game .when user press the button every time it will generate a random number between 1 to 3 and add it with the previous score ( 9 is the finishing point ). There also have two function pump() and demotive() .if the user reach total point 6 pump() will make it to the 8. if user reach 7 the demotive() make it 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>

But if I'm standing on 4 and if I get a score "two" then directly moved to the 8 instead of 6 => 8 . How can I fix that?.I want to demonstrate both movements(first move from 4 to 6 and then the pumped move from 6 to 8 one by one).How can I achieve that?

Answer 1

There are many ways you can decide weather you want to execute function in parallel or in serial. You can also decide order of execution in case one function is dependent in another.

1. call back function: As mentioned above, the call back function will execute once the parent function complete its execution.

2. Promise: It is more advanced then callback and you can set dependent function like

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

3. Observable: RxJs observable is also provides such mechanism and can be explore

Other option you can explore if exist.

Answer 2

To show the movement by pump() as 2 steps, you'll have to give the UI time to redraw in between the 2 movements. Currently, it won't redraw until the end of the click event, when k and the circle are already at 8.

You can give it that time with a brief 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);
    }
}

The delay doesn't have to be long; the alert() will hold the user's attention while the circle shows on square 6.

---

Combined with your example:

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 3

Actually you can add callback to your javascript function so it will be executed in order.

for example

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

this link here also will help