运行javascript函数时CSS动画停止

Question

假设我有这个javascript函数:

   function pauseComp(ms) {
     var date = new Date();
     var curDate = null;
     do { curDate = new Date(); }
     while(curDate-date < ms);
    }

和一个css3动画(例如,<i class="icon-spinner icon-spin"></i>来自新的字体 - 真棒3).当我运行上面的javascript函数时,它会在函数运行时停止微调器.看看我在这里谈论的是什么.基本上,javascript停止css动画,我想知道为什么,或者如果有人注意到这个/找到了一个解决方法.我已经尝试将它放在setTimeout(fn,0)中,其中fn是长进程,但后来意识到为什么它也不起作用(js不是多线程的).有人看到过这种情况吗？

更新:有趣的是,尽管与浏览器界面的交互仍然受到影响,但在Safari中看起来并不是一个问题.

Answer 1

浏览器页面是单线程的.更新UI发生在与javascript程序相同的线程上.这也意味着任何动画都不会在执行Javascript代码时绘制新帧.通常,这没什么大不了的,因为大多数JS代码执行得非常快,比单个动画帧更快.

所以最好的建议就是这样:不要那样做.不要长时间锁定JS引擎.想出一个更干净的方法来做到这一点.

但是,如果必须,有一种方法.您可以通过HTML5的Web Workers API获得额外的线程.旧版浏览器不支持此功能,但它允许您从主网页和自己的线程中运行一些长时间运行的CPU吸吮代码,然后在完成后将一些结果发回到您的页面.