Okay then, off to your updated code.
Nothing much I can do here now. Here are some generic code optimization tips:
Name stuff verbosely. It's one issue I find with others' code.
They tend to name it like for time, or for length. Unless it's something implied, like , and for counters (and we do see loops), please name them verbosely.
Don't ever worry about long code.
That's what minifiers are for.
Name them verbosely, structure them properly. Don't even bother using the "comma-separated s".
setInterval() will execute the expression in the INFINITE-LOOP after the each specified duration.
Minifiers do that.
Ternaries tend to be messy and unreadable. If possible, use .
Again, minifiers also convert them to ternaries to be shorter.
As for possible bottlenecks, is an overhead because it resizes the array, shifting the contents around. It's much avoided like and for the same reason. I don't know if keeping a "hole" in the array is a performance benefit either, so let's leave it as is.
A general performance tip is just to avoid creating objects inside the loops.
If it can't be avoided, just make sure you free them up when done (free references).
So far, that's about it. I'll leave the fine-tuning to you.
Normally i don't write functions inside functions, but in this case it's prolly a good solution.
Definition and Usage
What about memory leaks if i create hundreds of this timebased functions?
That wouldn't be an issue. Besides, how many functions do you think the FB homepage, or any site for that matter, creates? What you should be wary about, though, is when your timers create functions on every iteration.
That's what you should look out for. Along the lines of this:
Although some JS engines are smart enough to figure this out and pull out the function, I have seen performance decreases when doing this in some of my projects.
Is there a better solution to clear those functions?
I was thinking about something along the lines of a common function that can be referenced by each API function to generate a runner.
This way, we have one function sitting internally waiting to be called, instead of one created each call.
For heavy animations and multiple intervals,timeouts i was thinking to activate a single requestAnimationFrame loop which check for intervals and timeouts inside a previously stored array...
The last time I checked, looping through an array with 700+ items caused stuttering in the UI.
Also, by the nature of timers, they can actually be delayed by these operations.
Related Code Examples
Again, JS is single-threaded, and timers also live in that thread. If JS is busy churning, it can delay async tasks and that includes timers.
at a glance
One thing about is that it's built for animation.
It strives to give you a 60fps. However, when it can't, it isn't any different from and . Also, it depends on browser implementation.
Some browsers throttle timers according to different situations, like unfocused windows/tabs.
Let's start cherry-picking
Now here are some interesting things about your implementation:
- You have an internal function in each instance of a timer.
Looks like the root of your worries.
- But you also return an object for each instance for the . Why not store some sort of reference to running timers, and create another global function that clears them?
- Like you found out, 60fps is 16ms per draw. However, timers are as fast as 4ms.