javascript：对于数组中的每个项：创建div、移动div和在时间段后删除div

我有一份名单；我想一个接一个地显示这些名字。名称应显示在容器的顶部，然后移动到底部，然后取消显示。同时，下一个名字应该出现在容器顶部，开始移动，等等

我现在还不清楚： 我仍然需要创建使div移动的代码；稍后我会这样做，为它创建一个单独的函数可能更容易

我很清楚地意识到，我试图实现这一目标的方式很可能过于繁琐，但我只是一个初学者。。。 因此，我提出：

function myNamesFunction() {} {

  var y = 0;
  for (y = 0; y < document.getElementById("namelistID").getElementsByTagName('div').length;y++)

 {

 var vinden2 = document.getElementById("namelistID").getElementsByTagName('div')[y];

 {

  var div = document.createElement("div");
  div.innerHTML = (document.getElementById("namelistID").getElementsByTagName('div')[y].innerHTML);

  setTimeout(function () {
    document.getElementById("namecontentbox").appendChild(div)[y];
  }, 0000);
  setTimeout(function () {
    document.getElementById("namecontentbox").removeChild(div)[y];
  }, 2000);


 }

 }

}

函数myNamesFunction（）{}{
var y=0；
对于（y=0；y

Html代码是：

<div id="namelistID" style="display: none;">
  <div class="nameofperson">Person1</div>
  <div class="nameofperson">Person2</div>
  <div class="nameofperson">Person3</div>
  <div class="nameofperson">Person4</div>
</div>
<div id="namecontentbox"></div>

人1
人2
人3
人4

现在的问题是，自从我添加了“settimeout”之后，似乎只创建并删除了数组中的最后一项。我如何从第一个开始，然后让每个项目出现和消失

---

（关于如何继续（或重新启动…）的任何其他建议也是非常受欢迎的）

这是一个典型的问题，因为

y

的值在调用给

setTimeout

的函数时会发生变化

经典的解决方案是在循环中使用闭包来保护

y

：

  for (y = 0; y < document.getElementById("namelistID").getElementsByTagName('div').length;y++) {
    (function(y){
      // use y
    })(y);
  }

---

可能重复的Ok，谢谢，这确实有助于获得正确的项目，但它们都是一次添加的。在（函数（y）{之后加一个超时没有帮助，如果你想让超时以递增的时间执行，而不是在循环结束后的2秒，你必须通过不同的延迟。请参阅更新的答案。是的，就是这样。谢谢！

  setTimeout(function () {
    document.getElementById("namecontentbox").removeChild(div)[y];
  }, 2000*(y+1));