CodingForums.com - The setInterval timing is not consistent across browsers.

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript frameworks (http://www.codingforums.com/forumdisplay.php?f=62)

- - The setInterval timing is not consistent across browsers. (http://www.codingforums.com/showthread.php?t=285567)

The setInterval timing is not consistent across browsers.

Hi, I'm finding that the he elapsed number which is determined by the setInterval function is not consistent across browsers. The value can vary considerably. Can anyone advise on a way to get it more uniform.

update(elapsed: number) { var elapsedUnit = elapsed / 10;

this code is called based on this setInterval code :

$(document).ready(function () {
var game: Game = new Game;

$(document).keydown(game.onKeyDown);
$(document).keyup(game.onKeyUp);
//game.update();
//game.draw();
var timeA = new Date().getTime();
setInterval(function () {

var timeB = new Date().getTime();
var elapsedTime = timeB - timeA

game.update(elapsedTime);
game.draw();
}, 1000 / this.FPS);
});

setInterval adds the code to the queue to be run each time the specified number of miilliseconds has passed. The only reason why it would be delayed from running straight away once added would be if there is other JavaScript still running.

If you are getting significantly different results from this call in different browsers then you must be running a huge amount of JavaScript so that the queued code has to wait before being able to run - then how soon it runs would depend on how quickly the browser runs JavaScript.

The only two ways to get it more uniform are to either run a lot less JavaScript in the page or to increase the number of milliseconds between executions.

you would be better off using setTimeout() or requestAnimationFrame() so that your work loop cannot get backed up.

if something takes more than the frame display period, the next interval can get behind schedule. As these lagging executions stack up, the stack grows larger and memory consumption goes up. Some browsers throw away the backlog (chrome), while others simply grind to a halt (IE7).

in a game loop, you want to fire as often as possible, not on a pre-determined schedule: nobody will complain that your game has "too many FPS"...

I hope this "self-adjusting" routine example could help you a bit :)

PHP Code:


		
			
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="content-type" />
    <script type="text/javascript">
        var 
            delayTarget = 15,
            delaySet = delayTarget,
            delaySetMin = 10,
            timeLast = new Date(),
            timer = setTimeout(run, delaySet);
            
        function run(){
            //some procedures here
            var spanText = document.getElementsByTagName('span')[0].childNodes[0];
            spanText.nodeValue = 
                (spanText.nodeValue == '/') ? '―' 
                    : (spanText.nodeValue == '―') ? '\\' 
                        : (spanText.nodeValue == '\\') ? '|' : '/';
            
            //report
            var 
                timeNow = new Date(),
                delay = timeNow.getTime() - timeLast.getTime();
            document.getElementById('delay').value = delay;
            document.getElementById('delaySet').value = delaySet;

            //if was too slow or too fast
            if (delay > delayTarget) 
                delaySet--;
            else 
                if (delay < delayTarget) delaySet++;
            if (delaySet < delaySetMin)
                alert('Optimize procedure for faster execution, or set a longer target delay.');
            else{
                //re-run
                timeLast.setTime(timeNow.getTime());
                timer = setTimeout(run, delaySet);
            }
        }
    </script>
</head>
<body>
    <label for="delay">Actual Delay:</label><input type="text" id="delay" readonly><br/>
    <label for="delaySet">Delay Set:</label><input type="text" id="delaySet" readonly>
    <span>/</span>
</body>
</html>