Question

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

我还不是那个：我仍然需要创建使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);


 }

 }

}

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>

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

（关于如何继续（或重新开始......）的任何其他建议也非常受欢迎）

Answer 1

这是一个经典问题，因为y的值在您调用setTimeout的函数时会发生变化。

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

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

此函数是新y变量的范围，并且由于它立即执行，因此它保留了y此时所具有的值。

如果您希望一个接一个地执行超时，而不是同时执行所有超时，请增加时间：

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

javascript：对于数组中的每个项目：创建div，移动div并在timeperiod之后删除div

1 个答案: