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>

似乎浏览器只是在完全完成时才重新绘制其画布。CPU-Usage 也尽可能高。

有什么方法可以强制中断或减少 CPU 负载？

Answer 1

每次通过后，您应该使用requestAnimationFrame而不是while循环来呈现结果。

这是回退到https://gist.github.com/1579671requestAnimatonFrame的polyfillsetTimeout

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

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