div class 的图形动画和 javascript 的睡眠功能更新未同步完成

Question

我正在尝试通过 changing a div class 在更改下一个 div class 等几毫秒之前创建一个简单的动画。

问题是我的测试浏览器 (Chrome) 中的图形仅在所有调用结束时刷新，而不是在每次 class 更改后刷新。

for(var i = 0; i < 9 ; i++ ){
       document.getElementById(i).setAttribute("class","blueSquare" );
       sleep(500);
    }

here is the jsfiddle to test 我尝试了 Whosebug 中介绍的各种 hack，但 none 似乎有效。非常感谢您的帮助。

Answer 1

如果我理解正确的话，您是在尝试以一种间隔一次为 div 着色。您可以看一下 setTimeout，它显然可以达到 sleep 的目的。 setTimeout 在一定时间后执行函数。

你还需要看看closure，因为setTimeout是异步操作，但是循环不会因为setTimeout而停止执行

var onClick = function() {
    for(var i = 0; i <= 9 ; i++ ){
     (function(i){  // creating closure here
       setTimeout(function(){
         document.getElementById(i).setAttribute("class","blueSquare" );
       },i*500) // 1st div will be colored after 500 msec,second div 1000msec, & so on
     }(i))   
  }
};

$('#button').click(onClick);

JSFIDDLE

div class 的图形动画和 javascript 的睡眠功能更新未同步完成

graphics animation with div class and sleep function update with javascript not done synchronously

html

javascript

css

graphics

redraw