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"

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"

• javascript

Share Improve this question Follow edited Nov 4, 2022 at 9:33 mkrieger1 23.6k77 gold badges6464 silver badges8282 bronze badges asked Sep 8, 2016 at 8:48 Sean_A91Sean_A91 35344 silver badges1515 bronze badges 2

• 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 jsfiddle/Lg0wyt9u/1220. – Nenad Vracar Commented Sep 8, 2016 at 9:11
• You can also do this with requestAnimationFrame jsfiddle/Lg0wyt9u/1221 – Nenad Vracar Commented Sep 8, 2016 at 9:32

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

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.

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 bee 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 :)