JavaScript:为创建的每个节点添加延迟

Question

尝试学习 JavaScript，这是我的第一个“真正的”项目。

我试图为单击菜单按钮后创建的每个 .slice 元素添加延迟。 while 循环克隆并追加，然后 for 循环将不透明度更改为在每个切片上可见。

我试图弄清楚如何为每个切片节点添加不同的延迟，以便它们一个接一个地出现，而不是同时出现。

在 while 循环之后使用 forEach 吗？任何建议都会很棒。

JSFiddle: http://jsfiddle.net/5d2Gc/

JS:

(function () { 'use strict';

var m = document.getElementById('btn-nav');
var a = document.getElementById('main-nav');
var b = a.getElementsByClassName('background')[0];
var s = a.getElementsByClassName('slice');

m.addEventListener('click', function() {

  m.classList.add('open');

  var c = document.getElementsByClassName('slice')[0];
  var sWidth = c.clientWidth;

  while(sWidth < a.clientWidth*(a.clientHeight / c.clientHeight)) {

         var d = c.cloneNode(true);

         c.parentNode.appendChild(d);

         sWidth = sWidth + d.clientWidth; 
    }

    for(var i = 0; i < s.length; i++){
             s[i].style.opacity = 1;
           } 

}, false);

}());

HTML

Menu

          <div class="slice"></div>
                  </div>

Answer 1

查看此JsFiddle

而不是:

for(var i = 0; i < s.length; i++){
    s[i].style.opacity = 1;
} 

使用这个:

for (var i=0;i<s.length;i++) {
   (function(ind) {
        setTimeout(function(){s[ind].style.opacity = 1;}, 1000 + (1000 * ind));
   })(i);
}

我为每次迭代设置了超时。