运行javascript函数时CSS动画停止 [英] CSS Animations stall when running javascript function

问题描述

假设我有这个javascript函数：

Let's say I have this javascript function:

   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> 来自新的 font-awesome 3 ）。当我运行上面的javascript函数时，它会在函数运行时停止微调器。 看看我在说什么此处 。基本上，javascript停止css动画，我想知道为什么，或者如果有人注意到这个/找到了一个解决方法。我已经尝试将它放在setTimeout（fn，0）中，其中fn是长进程，但后来意识到为什么它也不起作用（js不是多线程的）。有人看到过这种情况吗？

and a css3 animation (for instance, <i class="icon-spinner icon-spin"></i> from the new font-awesome 3). When I run the javascript function above, it stops the spinner while the function is running. See what I'm talking about here. Basically, javascript stops css animations, and I'm wondering why, or if anyone else has noticed this/found a workaround. I've tried putting it in a setTimeout(fn,0), where fn is the long process, but then realized why that will also not work (js is not multithreaded). Anyone seen this happening?

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

Update: Interestingly, it looks like this isn't as much of a problem in Safari, although interaction with the browser interface is still being affected.

推荐答案

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

A browser page is single threaded. Updating the UI happens on the same thread as your javascript program. Which also means that any animation will not draw new frames while Javascript code is being executed. Typically, this is no big deal because most JS code is executed very quickly, faster than a single animation frame.

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

So the best advice is simply this: Don't do that. Don't lock up the JS engine for that long. Figure out a cleaner way to do it.

但是，如果必须，还有办法。您可以通过 HTML5的Web Workers API 获取其他主题。在旧版浏览器中不支持此功能，但它允许您从主网页和自己的线程中运行一些长时间运行的CPU吸引代码，然后在完成后将一些结果发回到您的页面。

However, if you must, there is a way. You can get an additional thread via HTML5's Web Workers API. This isn't supported in older browsers, but it will allow you to run some long running CPU sucking code away from the main webpage and in it's own thread, and then have it post back some result to your page when it's done.

这篇关于运行javascript函数时CSS动画停止的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！