我应该使用requestAnimationFrame来分配计算吗？

Question

我有一个很大的JS计算，我想在页面加载时完成。在一台体面的计算机上，计算大约需要5-10秒，这太长了，因为浏览器冻结了这段时间。

我可以轻松地将计算分成大约8毫秒来计算的块。我想通过将每个块附加到canvas元素来渲染它们。尝试使用requestAnimationFrame分发这些块是否明智？是否有更好的选择（以及为什么）？

---

背景信息： 我正在使用html2canvas将页面渲染为图像，然后使用Superfast Blur（http://www.quasimondo.com/BoxBlurForCanvas/FastBlurDemo.html）模糊图像。这样做的原因是为了复制iOS7的磨砂玻璃效果。有关详细信息，请参阅http://abduzeedo.com/ios7-frosted-glass-effect-html-5-and-javascript。 根据页面的尺寸，这需要相当长的时间。

Answer 1

如果您不打算渲染单独的步骤，则应使用setInterval或setTimeout。如果您不想动画，则无需使用requestAnimationFrame。

调用setTimeout时的第二个参数是在调用函数之前将经过的时间（以毫秒为单位）。你也可以把它设置为1ms，但是调用它所需的最小值大约是4ms。

var timeoutId = 0,
    calc = function() {
        // Your calculations go here

        if(!finished) {
            timeoutId = setTimeout(calc, 4);
        }
}

calc();