How do I call a JavaScript function every 60 seconds?_问答_开发者

How do I call a JavaScript function every 60 seconds?

开发者 https://www.devze.com 2023-01-03 03:17 出处：网络

So I\'m trying to work on a Canvas demo, and I want this square to move from one side to the other, but I can\'t figure out how to call JavaScript in a way tha开发者_开发百科t repeats every 60 seconds

So I'm trying to work on a Canvas demo, and I want this square to move from one side to the other, but I can't figure out how to call JavaScript in a way tha开发者_开发百科t repeats every 60 seconds.

Here's what I got so far:

<!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;
        }

        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); 
            }
        }
        </script>

    </head>

    <body onLoad="setTimeout(update(), 0);">
        <canvas id="screen1" width="500" height="500"></canvas>
    </body>
</html>

<!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.

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>