javascript - 强制渲染/让浏览器稍作休息？

Question

假设您正在处理一堆数据，现在这需要一些时间(在我的例子中，我通过 AJAX 访问多个资源，在收到它们后，我用 RegExp 解析它们 [解析是需要大量时间]).

您还想保证两件事:

• 浏览器不会卡住
• 用户有某种指标

我用 jQuery(UI) 制作了以下示例:

JS:

  $(function() {
     $("#progressbar").progressbar({
        value: 0
     });
     $("#blub").click(function() {
        i = 0;
        while(i < 5000) {
           $("#progressbar").progressbar({
              value: (i / 5000 * 100)
           });
           i++;
        }  
     });
  });

HTML:

<div id="progressbar"></div>
<div id="blub">KLICK</div>

似乎浏览器只是在 while 完全完成后才重新绘制其 Canvas 。CPU 使用率也尽可能高。

有没有办法强制中断或减少 CPU 负载？

Answer 1

您应该使用 requestAnimationFrame 而不是 while 循环在每次传递后呈现结果。

这是返回到 setTimeout 的 requestAnimatonFrame polyfill https://gist.github.com/1579671

下面是如何替换 while 循环，它不允许屏幕刷新或渲染，直到它完成计算。

var i = 0;
animate();
function animate() {
    requestAnimationFrame(animate);
    $("#progressbar").progressbar({
         value: (i / 5000 * 100)
    });
    i++;
}