Question

有人可以帮我模拟四个div标签的动画吗？只需for循环应该等到div标签的不透明度在1秒内改变。

parfor i=1:20000
    iter=num2str(i);
    mkdir(iter)
    copyfile('./mainfolder',iter)
    cd ./num2str(i)
    [pow_maxx,FFee,AA33,BB33,shape] = main(i);
    power_max(i,:)=pow_maxx(1,:);
    Fe(i,:)=FFee;
    A3(i,:)=AA33;
    B3(i,:)=BB33;  
    Shape_all(i,:)=shape(1,:);  
end

https://jsfiddle.net/z8y2v5u1/

Answer 1

for循环不能等待超时完成，因为您提供给setTimeout()的函数在当前函数（以及任何称为当前函数）完成后异步运行。所以整个循环将在超时发生之前运行。

您需要使用依赖setTimeout()的“伪循环”来触发下一次迭代。以下内容将起作用：

function animateDivs(ar, cb) {
  var $divs = $(".red,.green,.blue,.yellow"),
    i = 0;

  (function next() {
    if (i === ar.length) {
      if (cb) cb();
    } else {
      var $div = $divs.eq(ar[i]).css('opacity', 1);
      setTimeout(function() {
        $div.css('opacity', 0.7);
        i++;
        next();
      }, 1000);
    }
  })();
}
animateDivs([0,3,2,3,1,0,1,2,3], function() { console.log("Finished")});

div { width: 40px; height: 40px; display: inline-block; opacity: 0.7;}
.red { background-color: red;}
.green { background-color: green;}
.blue { background-color: blue;}
.yellow { background-color: yellow;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="red"></div><div class="green"></div>
<br/>
<div class="blue"></div><div class="yellow"></div>

next()函数将相应的div更改为不透明度1，然后使用setTimeout()等待一秒钟，然后再更改不透明度，然后再次调用next()以获取下一个索引数组。

我想你可能想知道动画什么时候结束，所以我在cb添加了一个回调参数（animateDivs()），它将在整个数组处理完毕后调用 - 在我的例子中，它只是将一些东西记录到控制台，但你可以用它来做一些更有趣的事情。

西蒙游戏，Javascript settimeout和动画

1 个答案: