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?

The functions most certainly do not execute in parallel. They happen one after the other. — Pointy, Dec 04 '16 at 03:52
@Pointy sorry I.m new to JS ,that is why I mistaken,is there any way to do one by one,I'm also tried setTimeOut but which didn't help me — ADH - THE TECHIE GUY, Dec 04 '16 at 03:54
For why `4` and `2` result in `8`, that seems to be precisely the goal of `pump()`, as you stated – `4 + 2` arrives at `6`, then "*if the user reach total point 6 `pump()` will make it to the 8.*." — Jonathan Lonowski, Dec 04 '16 at 03:55
@JonathanLonowski yeah i wanna to demonstrate the user reach 6 and the he will get pumped — ADH - THE TECHIE GUY, Dec 04 '16 at 03:56
@dreamhunter Okay. That's fine, but that behavior being your goal isn't clear from your question. — Jonathan Lonowski, Dec 04 '16 at 03:57
@dreamhunter your "click" event handler *always* calls *both* `pump()` and `demotive()`. It's really not very clear what you want that code to do. — Pointy, Dec 04 '16 at 03:59
@Pointy i just want to check the current scores reach 6 or 7 and if so take then take the action. — ADH - THE TECHIE GUY, Dec 04 '16 at 04:01
Possible duplicate of [Run function after another one completes](http://stackoverflow.com/questions/25144161/run-function-after-another-one-completes) — Jishnu V S, Dec 04 '16 at 04:15

Jonathan Lonowski · Accepted Answer · 2016-12-04T04:10:21.340

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>

This still gets an error though once you click enough times because he expects `k` to remain within a certain range as per `var parent = document.getElementById('a' + k);` and his div's only go up to `a9`. Perhaps he needs some sort of `if(k>9)k-=9;` or something similar. — Ultimater, Dec 04 '16 at 04:13
@ultimer really this is a minimized one, I have 10 x 10 board and there is a function to alert you won the game when reach 100.this is just designed to make functionality fully functional. — ADH - THE TECHIE GUY, Dec 04 '16 at 04:22
@dreamhunter Just in case, bear in mind that it's possible to pass by 100 without landing on it (e.g. when `k` is 99, a `num` greater than 1 skips into invalid territory). — Jonathan Lonowski, Dec 04 '16 at 04:26

Aniruddha Das · Answer 2 · 2016-12-04T04:27:53.700

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.

call back function: As mentioned above, the call back function will execute once the parent function complete its execution.
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)
Observable: RxJs observable is also provides such mechanism and can be explore

Other option you can explore if exist.

score 0 · Answer 3 · edited May 23 '17 at 12:33

0

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

edited May 23 '17 at 12:33

Community

1
1

answered Dec 04 '16 at 03:50

Kebeng

455
1
3
11

but in javascript most function is called one after another without waiting previous function to finish. this effect of asynchronous will be seen clearly if you have function with big loops – Kebeng Dec 04 '16 at 04:01
@Kebeng the effect of asynchronous will only be there if we have a ajax call or a api hit. Otherwise javascript functions work synchronously – Prashant K Dec 04 '16 at 04:09

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

3 Answers3