运行 javascript 函数时 CSS 动画停止答案

【问题标题】：CSS Animations stall when running javascript function运行 javascript 函数时 CSS 动画停止
【发布时间】：2013-01-17 06:16:12
【问题描述】：

假设我有这个 javascript 函数：

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

和一个 css3 动画（例如，来自新 font-awesome 3 的 <i class="icon-spinner icon-spin"></i>）。当我运行上面的 javascript 函数时，它会在函数运行时停止微调器。 看看我在说什么here。基本上，javascript 会停止 css 动画，我想知道为什么，或者是否有人注意到这一点/找到了解决方法。我试过把它放在 setTimeout(fn,0) 中，其中 fn 是长进程，但后来意识到为什么这也不起作用（js 不是多线程的）。有人见过这种情况吗？

更新：有趣的是，这在 Safari 中似乎不是什么大问题，尽管与浏览器界面的交互仍然受到影响。

【问题讨论】：

您需要将“长时间运行的代码”分解成块，以允许其他所有操作继续进行。
对，虽然我知道这会解决它，但对于我试图应用它的功能来说，这不是一个可行的解决方案。这些功能不能分解成更小的块。我真的在检查是否有人对上述确切问题有解决方案，同样，不能分解。

标签： javascript jquery css-animations

【解决方案1】：

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

所以最好的建议就是：不要那样做。不要长时间锁定 JS 引擎。找出一种更清洁的方法。

但是，如果必须，有办法。您可以通过HTML5's Web Workers API 获得额外的线程。这在旧版浏览器中不受支持，但它可以让您在主网页和它自己的线程中运行一些长时间运行的 CPU 吸收代码，然后让它在完成后将一些结果发回您的页面。

【讨论】：

是的，我见过网络工作者。你知道网络工作者是否可以访问 DOM 吗？因为我的长期运行过程是所有 DOM 更新都发生在 jQuery 中，这就是缓慢的原因。
@ChristianBankester Web Workers 无法访问 DOM。您必须使用setTimeout。
啊，我试过用setTimeout，没用。请参阅此更新的 jsfiddle：jsfiddle.net/JU4St/2
另外，我知道这是 javascript 的本质，是单线程的。只是想知道是否有可以完成我正在寻找的修复。
将setTimeout 与您的pauseComp 结合将不起作用。您必须将耗时的操作分成块，并使用setTimeout 一次调用一个块。