Question

我有一个小程序，我应该写在画布上制作一个弹性球。我可以得到一个球弹跳的线框，但似乎无法让setTimeout完全射击。我已阅读，阅读和阅读有关该功能的内容，但无法弄清楚（新）。

<!DOCTYPE HTML>
<html>
   <head>
      <title>basic Canvas</title>
      <style>
         #canvas1{
            border:1px solid #9C9898;
         }
         body{
            margin:0px;
            padding:0px;
        }
      </style>
      <script>
         function drawMe(){
            //Set x,y,radius
            var x = 60;
            var y = 60;
            var radius = 70;
            drawLoop(x,y,radius);
         }

         function drawLoop(x,y,radius){
            var canvas2=document.getElementById("canvas1");
            var ctx=canvas2.getContext("2d");
            for(i=1;i<100;i++){

                    if(y + radius >= canvas2.height){
                        d = 1;
                    }
                    if(y - radius <= 0){
                        d = 0;
                    }
                    if (d==0){
                        x = x + 10;
                        y = y + 10;
                    }
                    else if (d==1){
                        x = x + 10;
                        y = y - 10;
                    }
                    draw(x,y,radius);
                    window.setTimeout(function() {draw(x,y,radius)},3000);
                }
         }

         function draw(x,y,radius){
                    var canvas2=document.getElementById("canvas1");
                    var ctx=canvas2.getContext("2d");

                    ctx.beginPath();
                    ctx.arc(x,y,radius,0,2*Math.PI,false);
                    var gradient = ctx.createRadialGradient(x, y, 1, x, y, radius);
                    gradient.addColorStop(0,"blue");
                    gradient.addColorStop(1,"white");
                    ctx.fillStyle=gradient;
                    ctx.lineWidth=1;
                    ctx.strokeStyle="blue";
                    ctx.fill();
                    ctx.stroke();
         }
      </script>
   </head>
   <body onload="drawMe()">
      <canvas id="canvas1" width=1000" height="400">

      </canvas>
   </body>
</html>

一个叫做'drawMe（）'的小函数，它设置x，y和radius，然后调用一个小的绘制循环，它会触发100次绘制弹力球（'drawLoop'）。在函数drawLoop的底部，我调用draw，它实际上绘制了圆圈。根据我的阅读，行'setTimeout（function（）{draw（x，y，radius）};，3000）;应该每隔三秒调用一次绘图功能。但事实并非如此。我到底做错了什么？

Answer 1

setTimeouts从创建时算起。循环几乎立即运行并几乎同时创建setTimeouts。然后它们都在3秒后运行。

解决此问题的一种方法是在下面的解决方案中。在当前超时完成之前，这不会增加循环。 http://jsfiddle.net/x8PWg/14/

这只是众多潜在解决方案中的一个。

javascript setTimeout和一堆圈子的问题

1 个答案: