强制渲染/给浏览器一个短暂的休息时间?

时间:2012-10-02 16:01:27

标签: javascript jquery jquery-ui browser

假设您正在处理大量数据,现在需要花费一些时间(在我的情况下,我通过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时重绘其画布。 CPU使用率也尽可能高。

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

1 个答案:

答案 0 :(得分:4)

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

这是[{1}}填充回复requestAnimatonFrame https://gist.github.com/1579671

以下是如何替换你的setTimeout循环,它不允许屏幕刷新或渲染,直到完成计算。

while