javascript画布函数在没有警报的情况下无法工作

我正在制作一些演示网页，作为投资组合的一部分，向潜在雇主展示。
一页是“等离子球”中等离子弧的模拟，然后旋转360度查看“电弧”。
只有在每次重画后都会发出“警报”，然后在脚本运行时取消警报，才能通过每次旋转重画圆弧。没有警报，一切都不会发生

有人对此有解释/解决方案吗？以下是重画函数：

function reDraw(yAngle) //work in progress - redraw the arc through 360 degrees to see the path
{
   var xCs;
   var yCs;

   for(degrees=10; degrees<360; degrees+=1)//spin sphere through 360 degrees
   {   

      context1 = document.getElementById("canvas1").getContext("2d");

      context1.clearRect(0,0,600,600);

      radialGrad(1,'canvas1',300,300,300,300,300,0,0,1,colour1,colour2,0,0,600,600);

      firstMove=true;

      for(moves=0; moves<axisMove; moves++)
      {
         if(firstMove)//start at centre of sphere for each re-draw
         {
            xCs=300;
            yCs=300;
            firstMove=false;         
         }

         context1.beginPath();

         context1.moveTo(xCs,yCs);         

         spinAngle=(degrees/180*Math.PI);

         //we are spinning in the X-Z plane so resolve X-Z moves only - retrieve each positive or negative move from the axis move arrays

         xCs=xCs+(zCStep[moves]*Math.sin(spinAngle))+(xCStep[moves]*Math.cos(spinAngle));

         yCs=yCs+yCStep[moves];

         context1.lineTo(xCs,yCs);

         context1.shadowBlur=2;
         context1.shadowColor="grey";

         context1.strokeStyle="white";
         context1.stroke();

      }
      alert();   
   }

}

function reDraw（yAngle）//正在工作-通过360度重新绘制圆弧以查看路径
{
var-xCs；
var-yCs；
对于（度=10；度由于其（历史上的）单线程性质，WebBrowser在（javascript）函数（处理程序）结束时重新绘制内容（进度条、ajax加载gif等也存在同样的问题）。

因此，即使循环的一次迭代需要整整一秒钟（导致1FPS），画布仍然不会重新绘制（页面的其余内容也是如此），直到javascript结束

小旁注：HTML5网络工作者最大的优点之一是他们在自己的线程中运行，所以他们不会“阻止浏览器”

（历史上）解决上述问题的常见方法是使用计时器（
setInterval
似乎最适合您的特定情况，或
setTimeout
）让浏览器重新绘制内容（在本例中为画布元素）

编辑：

Stefano Ortisi在下面的评论中提醒了我关于
requestAnimationFrame
，并提供了一个很好的链接：

基本上，它存在的主要原因是，我们不需要继续使用相同的计时器，有一个浏览器优化的实现（vs计时器），理想的情况是与webworkers一起使用（耶，额外的线程）

起初，这个API是一个相当“活”的规范（这就是我忘记它的原因），但到现在为止，尘埃似乎已经沉降到足以创建一个漂亮的多边形填充（参见上面的链接）。

我同意anno dec.2013这是一个比定义自己的计时器更好的解决方案，因为“如果在不可见的选项卡中运行动画循环，浏览器将无法保持其运行，这意味着更少的CPU、GPU和内存使用，导致更长的电池寿命。”
根据其定义，
元素使用位图缓冲区。您可以将
视为具有可修改位图的

脚本在该位图中绘制（但不在屏幕上）。
浏览器会在有机会的时候渲染位图

要使浏览器有机会在某个步骤绘制位图，您应该以某种方式将脚本的执行过程传递给浏览器：调用
alert（）
、设置超时/间隔或在动画帧中绘制（
requestAnimationFrame
）

requestAnimationFrame
实际上是一个请求，用于重新绘制浏览器视图，该视图将在接下来的16ms（浏览器中的最大帧速率为60 fps）左右发生。
帧速率太快，请尝试使用
settimeout
为每个视图提供一定的显示时间frame@MatthewMcveigh：几乎与（非html5）的“问题”相同进度条：没有重画（几乎与“帧速率过高”相同）。同样值得检查requestAnimationFrame@StefanoOrtisi:这是一个很好的评论（thx），但我想补充一点，它仍然需要一个polyfill，然而，它比你自己的更干净、更好，因为它可以在未使用的选项卡中暂停，这是我非常重视的！！！要我将它添加到答案中以供将来的读者阅读吗？@GitaarLAB-那么为什么每次重新绘制时都会出现代码中的“警报”？settimeout/setinterval调用正在进行中当我在“redraw”函数中使用它们时，g被忽略。警报是一种“主机”方法，浏览器中的“主机”通常是“窗口”（因此是window.alert（））。一些浏览器允许您选择“取消”（正如您所说的）多个警报，因此很可能javascript仍然“暂停”（出于充分的理由，我将警报称为穷人的断点…）并将控制权移交给主机（本例中称为浏览器），请求弹出警报窗口。您应该尝试设置一个间隔，以调用每次函数调用绘制一帧的函数（并且需要存储一些状态以了解动画中的位置）@GitaarLAB-你如何在我的代码中编写“setTimeout/setInterval”暂停？我尝试的似乎都不起作用！你能分享一个链接到这16毫秒的参考/来源吗？我知道个人测试通常20毫秒会超过极限，30毫秒用于大多数其他任务（如等待新的（I）帧）我理想的跨浏览器值我尝试的第一件事是setTimeout和setInterval-没有乐趣。我还不理解requestAnimationFrame代码，但我会尝试一下。我找到了链接，它在stefano链接的同一篇paul irish文章中（见我的答案）。（旁注：哈哈，我从来不知道我发现的30毫秒是由于firefox中的一个bug造成的，所以现在我仍然会使用它来实现浏览器间的兼容性）@GitaarLAB，60 fps比浏览器的平台限制更大。例如，在Windows中，WM_PAINT通常每秒出现60次，Mac也有类似的上限。重新绘制速度比这快根本没有意义。人眼不会捕捉到更频繁的变化。72到75 hz（无闪烁），但在“慢速”平板屏幕上是60 hz（所以最终80FPS@80HZ对人眼来说是“完美的”）。但我明白了一点：）THX！