2

I'm messing around with a game idea, just for fun, and I'm doing it in html5's canvas and javascript, simply because I want the practice while I'm fooling around.

In my game there are many things that will happen one at varying times, and new things to do are constantly created. Precision is not necessary, as long as it's within a few seconds.

My first idea was simply to have an array, who was manually sorted, by inserting the new tasks based on their execution time, I would then have a function set on a timeout, it would grab the new task, handle it, get the time of the next ask in line, and wait with a timeout, when a new item is added it would check to see if it was the new first in line, and change the timeout appropriately.

But then I began to wonder.... What would be the pitfalls of setting many timers? At first I had thought it'd be a bad idea to set many timers, but then I began to wonder if maybe the browser handles the times in the same way I stated above, or some other effecient way.

So basically, to summarize my concerns:

  • What are the issues with using multiple timeouts, vs just doing one after another.
  • Are there any pitfalls to this sort of method? Or any "Gotchas"
mkrieger1
  • 19,194
  • 5
  • 54
  • 65
Sean_A91
  • 333
  • 4
  • 15
  • Not sure if this is option for you but maybe you could create recursion with one timeout and call multiple functions with it so something like this https://jsfiddle.net/Lg0wyt9u/1220/. – Nenad Vracar Sep 08 '16 at 09:11
  • You can also do this with `requestAnimationFrame` https://jsfiddle.net/Lg0wyt9u/1221/ – Nenad Vracar Sep 08 '16 at 09:32

2 Answers2

2

Setting multiple timeouts will not affect you performance, so you should stop worry about that. Node.js internally handles timeouts in a similar manner to yours idea. If you want to see some example, look at the following snippet:

let count = 10000;

console.time('Total time')

for (let i = 0; i < count; ++i) {
  setTimeout(() => {
    if (--count === 0) {
      console.timeEnd('Total time')
    }
  }, i / 10); // Set 10 timeouts for each millisecond
}

Ideally it's execution should take exactly 1000ms, as you can see, real result is not far from this.

Community
  • 1
  • 1
qzb
  • 8,163
  • 3
  • 21
  • 27
1

Off the top of my head, one thing you should keep in mind is that one timeout is one variable you have to assign. Should you want to cancel that timeout before it fires, you'll need to clearTimeout() with its handle. If you have many of them your code could become confusing to work with.

Moreover, Javascript is single threaded, so no actions can be executed at the same time. Sure it's fast enough to feel instantaneous, but having a stack order won't be any different.

At the end of the day it's your choice to code however you like best, so whether you choose to do one big global handling function or multiple small dedicated ones is up to you :)

tomiy
  • 146
  • 6
  • I understand all of that yes, but how do the timeouts work behind the scene is my issue, I'm afraid of like, costing a bunch of resources or something. Thanks for the frame of mind, it's helped put a picture of how it probably works into my head. – Sean_A91 Sep 08 '16 at 09:04
  • As far as i know, internally timeouts are put in the browser's timer thread, which is separate from the js thread. They count down as they would, and once they are finished they put the callback in the js thread. [edit: so if you're worried about performance, this is definitely not an issue up until you have thousands of them ;)] – tomiy Sep 08 '16 at 09:08