Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Senior Coder nikos101's Avatar
    Join Date
    Dec 2006
    Location
    London
    Posts
    1,008
    Thanks
    59
    Thanked 10 Times in 10 Posts

    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);

    });


  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,642
    Thanks
    0
    Thanked 649 Times in 639 Posts
    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.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • #3
    Senior Coder rnd me's Avatar
    Join Date
    Jun 2007
    Location
    Urbana
    Posts
    4,461
    Thanks
    11
    Thanked 600 Times in 580 Posts
    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"...
    my site (updated 2014/10/20)
    BROWSER STATS [% share] (2014/9/03) IE7:0.1, IE8:4.3, IE11:9.2, IE9:2.7, IE10:2.6, FF:16.8, CH:47.5, SF:7.8, NON-MOUSE:37%

  • #4
    Regular Coder hdewantara's Avatar
    Join Date
    Aug 2009
    Location
    Jakarta, Indonesia.
    Posts
    376
    Thanks
    9
    Thanked 55 Times in 54 Posts
    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(rundelaySet);
                
            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 delayTargetdelaySet++;
                if (
    delaySet delaySetMin)
                    
    alert('Optimize procedure for faster execution, or set a longer target delay.');
                else{
                    
    //re-run
                    
    timeLast.setTime(timeNow.getTime());
                    
    timer setTimeout(rundelaySet);
                }
            }
        
    </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> 
    Last edited by hdewantara; 01-11-2013 at 09:14 PM.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •