javascript : pour chaque élément du tableau : créer une div, déplacer la div et supprimer la div après une période donnée

Question

J'ai une liste de noms, et je veux afficher ces noms un par un. Le nom doit apparaître en haut d'un conteneur, puis se déplacer vers le bas, et enfin disparaître. Entre-temps, le nom suivant devrait être apparu en haut du conteneur, avoir commencé à se déplacer, ..., etc.

Je n'en suis pas encore là : Je dois encore créer le code qui fait bouger les divs ; je le ferai plus tard et il est peut-être plus facile de créer une fonction séparée pour cela.

Je me rends très bien compte que la façon dont j'essaie d'y parvenir est très probablement trop lourde, mais je ne suis qu'un débutant... Donc pour moi, j'ai fait :

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);

 }

 }

}

Le code Html est :

<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>

Le problème est que depuis que j'ai ajouté le "settimeout", seul le dernier élément du tableau semble être créé et supprimé. Comment puis-je commencer par le premier, puis laisser chaque élément apparaître et disparaître ?

(Tout autre conseil sur la manière de continuer (ou de redémarrer...) est également le bienvenu).

Answer 1

C'est un problème classique, dû à y changeant au moment où la fonction que vous donnez à setTimeout s'appelle.

La solution classique consiste à protéger y avec une fermeture dans votre boucle :

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

Cette fonction est le champ d'application de la nouvelle y et, comme il est immédiatement exécuté, il continue à protéger la valeur y à cette époque.

Si vous voulez que les délais soient exécutés les uns après les autres, et non pas tous en même temps, incrémentez le temps :

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