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

Question

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

我可以轻松地将计算分成大约需要 8 毫秒才能计算的 block 。我想通过将每个 block 附加到 Canvas 元素来渲染它。尝试使用 requestAnimationFrame 分发这些 block 是否明智？也许有更好的选择(以及为什么)？

<小时/>

背景信息:我使用 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();