Best way to add timings between functions?

Question

Okay, so I've been doing some JS practice and I decided to make a basketball simulation in console. The main issue for me is making a timings between functions:

var Ascore = 0;
var Bscore = 0;

var time = 10;
var ball = 0;
var rng = 0;

function timer() {
  time--;
  if (time >0) {
    start();
    setTimeout(timer, 1000);
    console.log(time);
  } else {
      console.log('Game is over!');
      console.log(teamAscore + ':' + teamBscore)
  }
}
timer();

function start() {
    rng = Math.random()*100;
    if (rng < 50) {
        aball();
        console.log('Team A gets the ball!');
    } else {
        bball();
        console.log('Team B gets the ball!');
    }
}

function aball() {
    rng = Math.random()*100;
    if (rng > 50) {
        Ascore + 2;
        console.log('Team A scored 2 points!');
        bball();
    } else {
        console.log('Team A missed!');
        rng = Math.random()*100;
        if (rng > 50) {
            aball();
            console.log('Team A rebounded!');
        } else {
            bball();
            console.log('Team B got the rebound!');
        }
    }
}

function bball() {
    rng = Math.random()*100;
    if (rng > 50) {
        Bscore + 2;
        console.log('Team B scored 2 points!');
        aball();
    } else {
        console.log('Team B missed!');
        rng = Math.random()*100;
        if (rng > 50) {
            bball();
            console.log('Team B rebounded!');
        } else {
            aball();
            console.log('Team A got the rebound!');
        }
    }
}

I pasted the code since people can't understand it. Right now everything works BUT it keeps going over and over and over infinitely. I want 5 second delay betwen each bball, aball function.

dr.dimitru · Answer 1 · 2017-05-23T23:21:45.580

1

To set function in a loop with timeout between each execution, use setInterval:

var delayInMilliseconds = 5000;
setInterval(function () {
  /* ... */
}, delayInMilliseconds);

To delay function execution (function will be executed once), use setTimeout:

var delayInMilliseconds = 5000;
setTimeout(function () {
  /* ... */
}, delayInMilliseconds);

Both setInterval and setTimeout will work in a browser and node.js

Further reading:

If you're dealing with games, consider reading about browser specific requestAnimationFrame callback
For similar behavior at node.js, but relied on "processor ticks", read about process.nextTick callback
setTimeout node.js reference
setTimeout browser reference
setInterval node.js reference
setInterval browser reference

edited May 23 '17 at 23:21

answered May 23 '17 at 23:12

dr.dimitru

2,645
1
27
36

Can you please recheck my code? I can't understand where do I put these timings for it to work properly. – Petras Vilkelis May 23 '17 at 23:18
@PetrasVilkelis remove `function timer()` and pass `bball` and `aball` to `setInterval `, like: `setInterval(bball, 5000);` and `setInterval(aball, 5000);` – dr.dimitru May 23 '17 at 23:21
Ok, but even still, it updates every second or so. And every second I get like 5 logs. It like accelerates within every update and multiplies. Each update theres more and more console logs. – Petras Vilkelis May 23 '17 at 23:38
I want it to update every 5 seconds with a single log. – Petras Vilkelis May 23 '17 at 23:39
It's caused by your code nature - its recursive (invokes itself) remove `aball()` and `bball()` from functions body. Use only `start` in `setInterval`, like: `setInterval(start, 5000);` – dr.dimitru May 23 '17 at 23:43

score 0 · Answer 2 · answered May 23 '17 at 23:15

If you mean you want to call either function based on rng you could do this. Note that I added var to make rng local to the function.

function aball() {
    var rng = Math.random()*100;
    if (rng > 50) {
        Ascore + 2;
        console.log('Team A scored 2 points!');
        bball();
    } else {
        console.log('Team A missed!');
        rng = Math.random()*100;
        if (rng > 50) {
            setTimeout(aball, 5000);
            console.log('Team A rebounded!');
        } else {
            setTimeout(bball, 5000);
            console.log('Team B got the rebound!');
        }
    }
}

I understand your problem. Note that I don't use `()` after the function name in the setTimeout as this will evaluate/execute the console.log immediately. And the other problem is that you call timer every second, which calls start, which calls either function, and they too keep calling each other, so you're like quadrupling function calls every second causing browser crash. — yezzz, May 23 '17 at 23:51

Joseph Chambers · Answer 3 · 2017-05-24T00:20:11.790

I'm trying to refactor your code to do what you need it to do. Can you help me clarify some things? I'm guessing: aball and bball should be really named:

lakersBall()

pistonsBall()

What are you trying to represent for rng? This code is not done, and I will clean it up more with your desired result once I understand a little better.

let pistonsScore = 0;
let lakersScore = 0;

let time = 10;
let ball = 0;
let rng = 0;

function timer() {
  time--;
  time > 0 ? console.log(time) : console.log(`Game is over! The pistons scored ${pistonsScore} and the Lakers scored: ${lakersScore}`);
}

function start() {
  rng = Math.random() * 100;
  rng < 50 ? console.log("Pistons got the ball!") : console.log("Lakers got the ball!")
}

function pistonsBall() {
  rng = Math.random() * 100;
  if (rng > 50) {
    pistonsScore + 2;
    console.log("Pistons scored 2 points!");
  } else {
    console.log("Pistons missed!");
    rng = Math.random() * 100;
    if (rng > 50) {
      console.log("Pistons rebounded!");
    } else {
      console.log("Lakers got the rebound!");
    }
  }
}

function lakersBall() {
  rng = Math.random() * 100;

  if (rng > 50) {
    lakersScore + 2;
    console.log("Lakers scored 2 points!");
    console.log("Lakers rebounded!");
  }

  if(rng < 50) {
    console.log("Lakers missed!");
    console.log("Pistons got the rebound!");
    rng = Math.random() * 100;
  }
}

No, you don't understand I want it to update itself and play like a real game, not call functions yourself. Automatically, with timers. — Petras Vilkelis, May 24 '17 at 19:39

score -1 · Answer 4 · answered May 23 '17 at 23:06

-1

Try to use setTimeout(5000, function). Check this question to see some possible cases of setTimeout.

answered May 23 '17 at 23:06

Garmastewira

39
2
8

Best way to add timings between functions?

4 Answers4