Notification Bar

[old_blueyes]

Hi,

I'm after some advice, i'm trying to figure out the most efficient way of emulating the behaviour of the commentary bar within Football Manager series.

In essence a notification bar, which shows up intermittently and displays text highlights:

Now, i've already done a little groundwork and have a renderBox() function that when called, will display bar and message, then disappear.

I'm wondering though what is the most efficient way of the achieving random intermitten display behaviour?

Would anybody recommend a setTimeout approach, I have also wondered about firing it on boolean triggers.

Appreciate any feedback.

Thanks
 

[mattstyles]

Boolean triggers?

If you want something to happen in the future, then you are very limited for choice.

setTimeout, setInterval, using your own counter that increments on requestAnimationFrame or keep a timestamp and poll periodically. I think that's about it, there may be some more creative solutions out there.

Of those, I reckon setInterval is the absolute simplest, but, it's flawed enough I wouldn't recommend it (for this small rendering task it is fine though), setTimeout is only slightly more complicated.

If you already have a rendering loop that fires as close to 60 fps as it can get though, implementing a counter or a timestamp should both be simple enough. A counter would work by incrementing each frame, when a certain number is reached, flip the colours—this would tie it to frame rate though. Generally being frame-rate tied is a little smelly, but, for this sort of task would probably be fine, you aren't tracking any type of actual translation (movement) and it would only slow down when the fps slows down, in which case you couldn't render it any faster anyway. A timestamp, comparing the now time to the last time you flipped it, would also be reasonably simple, probably.

Bare in mind the 'absolute' simplest browser-based way of doing this is with CSS animations because it saves you working out how to program it. Given you aren't using CSS, this might be less attractive as a solution to you.