ansaurus

Question

how do I call a javacript function every 60 seconds?

Answer 1

+5 A:

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Canvas test</title>
        <meta charset="utf-8" />
        <link href="/bms/style.css" rel="stylesheet" />

        <style>
            body { text-align: center; background-color: #000000;}
            canvas{ background-color: #ffffff;}
        </style>


    </head>

    <body>
        <canvas id="screen1" width="500" height="500"></canvas> 
        <script type="text/javascript">

        var x = 50;
        var y = 250;

        function update(){
            draw();
            x = x + 5;
        }

        function draw(){
          var canvas = document.getElementById('screen1');
          if (canvas.getContext){
            var ctx = canvas.getContext('2d');
            ctx.fillStyle = 'rgb(236,138,68)';
            ctx.fillRect(x,y,24,24); 
            }
        }
            update();
            setInterval ( update, 60000 );
        </script>
    </body>
</html>

1000ms = 1 second, 60000 = 60 seconds.

meder 2010-06-13 18:59:47

Correct for most purposes. Chances are, in certain browsers, it's not going to be that accurate. I have a piece of code that runs a function every *n* seconds, it slowly deteriorates in Internet Explorer. If you need accuracy, run the timer more frequently and check time difference manually.

Andy E 2010-06-13 19:02:52

<body onLoad="setInterval(update(), 1000);">This didn't seem to work (I.E. I didn't get any movement from the square at all). Am I doing something wrong?

William 2010-06-13 19:03:07

dont invoke it automatically with `()`, I updated my answer.

meder 2010-06-13 19:06:02

@William Yes. `setInterval("update();", 1000);` should work nicely. (Note the quotes. W/O them, it's an update function call. So, effectively, you're passing the return value of `update` to setTimeout.)

Aviral Dasgupta 2010-06-13 19:07:01

@William: No, don't use those quotes, as that string needs to get `eval` uated every time. Just use `setInterval(update, 1000);` instead. Now it contains a reference to a function instead of a string.

Marcel Korpel 2010-06-13 23:29:34

Answer 2

+1 A:

Using setTimeout, instead of setInterval, allows you to stop the animation with clearTimeout and the use of a variable.

(edit: this whole thing doesn't work in IE, but the setTimeout - clearTimeout combo itself should... also changed the onload and onclick events)

<!DOCTYPE html>
    <html lang="en">
    <head>
        <title>Canvas test</title>
        <meta charset="utf-8" />
        <link href="/bms/style.css" rel="stylesheet" />
        <style>
            body { text-align: center; background-color: #000000;}
            canvas{ background-color: #ffffff;}
        </style>
        <script type="text/javascript">             
            var x = 50;
            var y = 250;
            function update()
            {
                draw();
                x = x + 5;
                // For one minute, you would use 60000 instead of 100.
                // 100 is so you can actually see it move.
                myToggle = setTimeout(update, 100);
            };
            function draw()
            {
                var canvas = document.getElementById('screen1');
                if (canvas.getContext)
                {
                    var ctx = canvas.getContext('2d');
                    ctx.fillStyle = 'rgb(236,138,68)';
                    ctx.fillRect(x,y,24,24); 
                }
            };
            function stop()
            {
                clearTimeout(myToggle);
            };
            window.onload = function() 
            {                    
                document.getElementById("stop").onclick = function() { stop(); };
                document.getElementById("start").onclick = function() { update(); };
                update();
            };
        </script>
    </head>
    <body>
        <canvas id="screen1" width="500" height="500"></canvas><br/>           
        <input id="stop" type="button" value="Stop" /><br/>
        <input id="start" type="button" value="Start" /> 
    </body>
</html>

Peter Ajtai 2010-06-13 19:09:58

quoting function call = eval = badbadbad, use a function literal.

meder 2010-06-13 19:11:51

@meder You mean in setTimeout? How do you do it w a function literal? I always run into problems with setTimeout recursion and function literals.... The "Stop" and "Start" buttons are just for simplicity with onclick, instead of functional literals in the <script>

Peter Ajtai 2010-06-13 19:21:59

Can you make a new post with your recursion problem?

meder 2010-06-13 19:25:19

@meder Whoops. I'm not sure what I was thinking. I seem to remember having problems with setTimeout in the past. Guess I was wrong. I changed the code above.

Peter Ajtai 2010-06-13 19:31:30

ansaurus

tags:

views:

answers:

how do I call a javacript function every 60 seconds?

related questions