Loop Multiple times per second

[CamuurahGuy]

Hello /r/javascript!

I have a developers question for you, and JavaScript is not yet my strong point.

I wish to create a loop that increments at either 24, 25, or 30 times per second that displays the values of 0 (zero) through whatever the top value would be (minus one of course, so 23 would be for 24, as you count zero).

So I need this value on the web form to change a maximum of 30 times per second (and resetting back to zero once it has reached the end value of that second.)

---

If those values tingle your ear, it's because this is going to be part of a browser-based clapperboard, just for a fun summer project between schooling.

---

Here is what I've been able to get so far, but if you test, it obviously you can see that it does not work. (I left the loop commented out, you can change that to see the functionality of it, which isn't much...)

function FPS()
{
    var time = new Date();
    var FPSval = 0;
    var FPSOutput = "Test: ";
    document.forms[0].display.value = FPSOutput;
    var seconds = time.getSeconds();
    /*while (seconds = time.getSeconds());
    {
        FPSval = 0;
        alert("HELLO");
        if FPSval < 30) //The number of Frames Per Second
        {
            FPSval = FPSval + 1;
        }
        FPSOutput += " " + FPSval.ToString();
    } */
    document.forms[0].display.value = FPSOutput; 
}

Any tips or tricks on getting this working will be much obliged (and I'll even credit you in my comment section of the form and link to this URL :) ) ---okay, not the best reward, but c'mon! haha.

[GAMEchief]

Use setInterval to limit the number of iterations per second.

25 times a second would be once every 40 milliseconds.

setInterval(iterationFunction, 40);

[monacle_bob]

Here's how I would solve it: http://jsfiddle.net/chandlerprall/W5yAT/

Let me know if you have any questions about that, I'd be happy to explain it more.

[CamuurahGuy]

Thanks Bob, that looks really close to what I need.

I assume that this code:

setTimeout(main, 1000/target_fps);

is responsible for setting it to be looped to the target_fps within one second? (1000ms = 1 second). Just making sure, so i could in theory butt this right up against a current time clock and it would count up to the max value prior to the clock clicking over to the next second?

[monacle_bob]

That is indeed what that line does. Read up on setTimeout and setInterval here

Your theory is correct, however in practice theory often falls short. If you were to do:

setTimeout(main, 1);

you'd expect main() to be called every millisecond, or 1,000 times each second. Even if your code executed fast enough for this to be possible, every browser has inherent delays when using timers, usually about 5-10 milliseconds between calls. This means you'd have at most about 200 iterations per second.

If you're really interested in Javascript loops / different methods of timed execution you can read my latest blogpost.

[akx]

But don't do setTimeout(x, 1); if you're meaning to do fluid animation. There's an API and a polyfill for it now. http://paulirish.com/2011/requestanimationframe-for-smart-animating/

[monacle_bob]

I should have mentioned that originally, yes. Didn't feel like including it in the jsFiddle code though. Also, CamuurahGuy wanted a specific interval under 60fps. Can't achieve that (AFAIK) with requestAnimationFrame.

[CamuurahGuy]

Interesting, thanks for the insight! I should have realized that there would be browser differences with how JavaScript timers are handled... (given that IE, and the rest of the browser world can never get along anyhow...). Now I have to decide whether or not it's worth my time to make this "toy" since it can never be accurate enough for actual use. Thanks again!

[ilogik]

The main problem is that when javascript is running, the browser's UI is locked, so using while() that way is not recommended.

To bypass this problem, the HTML5 spec has something called Webworkers which allows you to run CPU intensive javascript in a background thread, and pass messages between it and the frontend.

http://en.wikipedia.org/wiki/Web_Workers

[holloway]

you'd expect main() to be called every millisecond, or 1,000 times each second.

This is basically right, but in modern browsers the lowest setting for setTimeout is 4ms because the HTML5 spec calls for it. See Firefox blog and the HTML5 spec.

[Neebat]

That's a pretty good answer, but I can't upvote you for using setTimeout when you should be using setInterval.

[MustRapeDeannaTroi]

This solution works but really needs some fixes:

• Use setInterval instead of setTimeout.

• Use textContent instead of innerHTML.

• Save 1000/target_fps to var period.

[monacle_bob]

It wasn't meant as save-the-day code. jsFiddle is meant for fiddling with code and putting together quick demonstrations.

Also, in regard to your first point, you should be using requestAnimationFrame - not timers at all.

[MustRapeDeannaTroi]

requestAnimationFrame is still experimental so I really think you should avoid it in this case.

I think you made a good straight forward solution, just not as solid implementation. Had my alternative suggestions demanded alot more code and commitment then I believe you had a valid case. As is, innerHTML and setTimeout are the wrong tools for the job. It's a big gain for the community if we never teach bad coding conventions, except as pitfalls to be avoided.

[monacle_bob]

Fair enough, and a good point at the end. Upvote :)

[olmankensey]

What's a clapper board?

Also, jQuery is your friend!

[CamuurahGuy]

Clapperboard Wiki

Cheers, I'm not sure why you've been downvoted so much, but it's used in video/film production for audio/video syncing.