递归函数和setTimeout()问题

Question

我有一个脚本可以在画布上绘制一堆线条，但它非常密集，因此渲染时浏览器会冻结几秒钟。我添加了 setTimeout() ，这样浏览器就不会冻结，并且它实际上弄乱了我的脚本。很难解释如何操作，所以我在网上有两个例子：

没有 setTimeout() ： http://www.modwebsolutions.com /test1

使用 setTimeout() ： http://www.modwebsolutions.com/test2

请注意，我只更改了整个脚本中的一行，即第 69 行：
不使用 setTimeout()：vLoop();
使用 setTimeout()：setTimeout(vLoop,1);

Answer 1

正如其他人所暗示的，这里的问题是您一次绘制一个象限的线。一旦调用 SetTimeout 方法并且第一个 vLoop 返回，代码就会继续运行到下一个 drawVertical，这将更改所有全局变量等等。

您需要做的是同步调用 vLoop 的方式以及更改全局变量的方式。

这基本上是解决方案：

 

将 ...

drawVertical(c,-1*step,-1*stepInt,-1*bigStep,xStart,xEnd,y/2+50,y);
drawVertical(c,step,stepInt,bigStep,xStart,xEnd,y/2+50,y);
drawVertical(c,-1*step,-1*stepInt,-1*bigStep,xStart,xEnd,y/2-50,0); 
drawVertical(c,step,stepInt,bigStep,xStart,xEnd,y/2-50,0);

... 替换为

var q = new Array();
q[0] = [c,-1*step,-1*stepInt,-1*bigStep,xStart,xEnd,y/2+50,y];
q[1] = [c,step,stepInt,bigStep,xStart,xEnd,y/2+50,y];
q[2] = [c,-1*step,-1*stepInt,-1*bigStep,xStart,xEnd,y/2-50,0];
q[3] = [c,step,stepInt,bigStep,xStart,xEnd,y/2-50,0];

drawQuadrant(q, 0);

...

将您的 drawVertical 函数替换为

function drawQuadrant(q, i)
{
    var r = q[i];

    c__ = r[0];
    step__ = r[1];
    stepInt__ = r[2];
    bigStep__ = r[3];
    xStart__ = r[4];
    xEnd__ = r[5];
    yStart__ = r[6];
    yEnd__ = r[7]; 


    vLoop(q,i);
}

...

将 vLoop 函数原型更改为如下所示

function vLoop(q,i)

...

最后将递归 vLoop 调用（从 vLoop 内）替换为 ...

if ((xStart__ > 0) && (xStart__ < window.innerWidth))
{
    setTimeout( function(){vLoop(q,i)}, 1 );
}
else if (++i < 4)
{
    setTimeout( function(){drawQuadrant(q,i)}, 1 );
}

最后一个块是确保象限不会相互跨越的地方。

Answer 2

drawVertical(c,-1*step,-1*stepInt,-1*bigStep,xStart,xEnd,y/2+50,y);
drawVertical(c,step,stepInt,bigStep,xStart,xEnd,y/2+50,y);
drawVertical(c,-1*step,-1*stepInt,-1*bigStep,xStart,xEnd,y/2-50,0); 
drawVertical(c,step,stepInt,bigStep,xStart,xEnd,y/2-50,0);

您一次调用 vLoop 的 4 个递归函数。这里的问题是 setTimeout 是非阻塞的，而递归是阻塞的。所以基本上现在所有 4 个drawVertical 函数都是并行运行的，而不是按顺序运行。

另一个问题是所有 4 个引用都会扰乱全局状态，导致整个程序崩溃。

Answer 3

所发生的情况是 setTimeout() 将所有执行延迟到稍后。不幸的是，此时您的全局变量已全部从初始循环移动到其结束位置，因为它在绘制第一条线之前完成。

如果您将超时进一步提高（因此您正在使用的共享变量在绘制时间之前不会受到影响），您可以实现您所追求的目标，例如：

setTimeout(function() {
    drawVertical(c,-1*step,-1*stepInt,-1*bigStep,xStart,xEnd,y/2+50,y);
    drawVertical(c,step,stepInt,bigStep,xStart,xEnd,y/2+50,y);
    drawVertical(c,-1*step,-1*stepInt,-1*bigStep,xStart,xEnd,y/2-50,0);
    drawVertical(c,step,stepInt,bigStep,xStart,xEnd,y/2-50,0);
});

那么这将起作用（但这很危险，顺序并不绝对）保证！）

您可以在此处查看一个工作示例。