Question

我有一个css动画，我有js代码做某事，比如循环i：

 >>> import nltk
Traceback (most recent call last):   File "<stdin>", line 1, in <module>   File "/home/kenden/den/codes/myenv/lib/python2.7/site-packages/nltk/__init__.py", line 128, in <module>
        from nltk.chunk import *   File "/home/kenden/den/codes/myenv/lib/python2.7/site-packages/nltk/chunk/__init__.py", line 157, in <module>
        from nltk.chunk.api import ChunkParserI   File "/home/kenden/den/codes/myenv/lib/python2.7/site-packages/nltk/chunk/api.py", line 13, in <module>
        from nltk.parse import ParserI   File "/home/kenden/den/codes/myenv/lib/python2.7/site-packages/nltk/parse/__init__.py", line 79, in <module>
        from nltk.parse.transitionparser import TransitionParser   File "/home/kenden/den/codes/myenv/lib/python2.7/site-packages/nltk/parse/transitionparser.py", line 21, in <module>
        from sklearn.datasets import load_svmlight_file   File "/home/kenden/den/codes/myenv/lib/python2.7/site-packages/sklearn/__init__.py", line 57, in <module>
        from .base import clone   File "/home/kenden/den/codes/myenv/lib/python2.7/site-packages/sklearn/base.py", line 11, in <module>
        from .utils.fixes import signature   File "/home/kenden/den/codes/myenv/lib/python2.7/site-packages/sklearn/utils/__init__.py", line 17, in <module>
        from ..externals.joblib import cpu_count   File "/home/kenden/den/codes/myenv/lib/python2.7/site-packages/sklearn/externals/joblib/__init__.py", line 127, in <module>
        from .parallel import Parallel   File "/home/kenden/den/codes/myenv/lib/python2.7/site-packages/sklearn/externals/joblib/parallel.py", line 30, in <module>
        from .format_stack import format_exc, format_outer_frames   File "/home/kenden/den/codes/myenv/lib/python2.7/site-packages/sklearn/externals/joblib/format_stack.py", line 35, in <module>
        generate_tokens = tokenize.tokenize AttributeError: 'module' object has no attribute 'tokenize'

此代码保持我的动画不会运行。有解决方案吗？不使用gif

html + css代码

for (var i = 0; i < 10000; i++)  {
 console.log(i);
}

codepen - css animation

Answer 1

不，这是不可能的。或者至少没有重新格式化代码。动画卡住的原因是因为呈现页面就像任何其他功能一样。如果你用你的循环占用JS堆栈，那么浏览器永远不会重新渲染你的屏幕，从而渲染你的动画。

潜在解决方案：

您可以使用setInterval而不是时间为0的循环。这样做是将每个函数推送到回调队列中，并在每次清除堆栈时执行它。这允许动画渲染的时间。你想要这样的东西：

var counter = 0;

var inter = setInterval(function(){
 if(++counter >= 1000){
  return clearInterval(inter);
 }
 console.log(counter);
},0);

网络工作者解决方案

您也可以尝试使用网络工作者。 Web Workers API允许您在单独的线程上运行JS进程。这将要求您将JS存储在外部脚本中。

当js忙时，CSS动画卡住了

1 个答案: