Precise timing on setTimeout function

Question

I need to reproduce an animation-like effect on the browser (mobile and desktop), this effect is just a procedural changes on the background color from black to white.

The timming is important, since a black background for a short time means "0" and a longer time means "1" (is like a binary Morse code). This information is interpreted by a light sensor in front of the screen. The sensor is very fast, and if we use a lower frequency we wont have problems with the screen (assuming a maximum refresh rate of 50Hz).

This is the script im using:

var i = 0;
var b0t = 100;
var b1t = 3.5 * b0t;
var wl = 100;

function pulses (){
    bytes = "1001101010110101001000100";

        bit = bytes[i];

        i += 1;

        document.body.style.backgroundColor = 'white';
        document.body.style.color = 'white';

        setTimeout(toblack, wl);

        if(i <= bytes.length) {
            if (bit == 1)
                setTimeout(pulses, b1t + wl);
            else
                setTimeout(pulses, b0t + wl);
        }
}

function toblack() {
    document.body.style.backgroundColor = 'black';
    document.body.style.color = 'black';
}

pulses ();

And a working demo (Do not open if you suffer any epileptic syndrome)

The problem is, 1 out of 20 the browser mess the timing, of course in the sensor side i have a tolerance range, a very tolerant range, but again the browser some times is out by several milliseconds, and this is no surprise, if your computer of cellphone is doing something in the background the performance of the browser is severely affected.

Is there a software solution for this? I was thinking using flash to do the flickering with more precision, but i really like my app to be accessible also from IOS. Or i can make a native app that for sure will be more precise than the browser, but then again, i will like to know if i can make it work on the browser.

I think a NaCl app is the best solution as you really don't want to rely on a timer in synchronous single threaded applications (at least in my experience). Flash would probably do the trick but like you said, IOS could be an issue here. Perhaps canvas? http://stackoverflow.com/questions/16253920/canvas-game-timer — Mike H., Dec 16 '13 at 14:32
*"...assuming a maximum refresh rate of 50Hz..."* That seems like an invalid assumption, most monitors I've used have been at *least* 60Hz, even here in the UK where the mains are 50. — T.J. Crowder, Dec 16 '13 at 14:33
There are other ways to time events in JS, the link above or [this](http://stackoverflow.com/questions/13939719/best-approach-for-creating-a-time-sensitive-browser-app-for-desktop-with-high-ti) could be a possible alternative to using setTimeout — DBS, Dec 16 '13 at 14:36

score 1 · Answer 1 · answered Dec 16 '13 at 14:37

the only thing i can suggest you to try is, forget about sestTimeout and try Date().getTime() it will give you a microsecond unix timestamp and you can try to query that and implement your own set timeout... i dont know if that will work, but you lost nothing trying.

take a look here http://www.sitepoint.com/creating-accurate-timers-in-javascript/

there are some examples.

Precise timing on setTimeout function

1 Answers1