créer des éléments DOM par un intervalle limité avec Jquery

Question

Je veux créer un conteneur div pour chaque x deuxième. Et je veux faire ça n temps.

J'ai donc commencé à créer ce

$(document).ready(function() {
  for (var i = 0; i < 5; i++) {
    createEle(i);
  }
});

function createEle(value) {
  var d = $("<div></div>");
  d.addClass("d");
  d.html(value);
  $("#container").append(d);
}

.d {
  height: 20px;
  color: white;
  background: red;
  margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

</div>

cela fonctionne bien. Mais je veux intégrer l'intervalle de temps.

$(document).ready(function() {
  for (var i = 0; i < 5; i++) {
    setTimeout(function() {
      createEle(i);
    }, i * 1000);
  }
});

function createEle(value) {
  var d = $("<div></div>");
  d.addClass("d");
  d.html(value);
  $("#container").append(d);
}

.d {
  height: 20px;
  color: white;
  background: red;
  margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

</div>

Comme vous pouvez le voir dans le deuxième exemple, j'obtiens toujours une valeur erronée parce qu'il passe dans la mauvaise valeur d'index.

Comment puis-je réparer ça ?

Answer 1

Remplacer var con let .

for (let i = 0; i < 5; i++) {

Démo

$(document).ready(function() {
  for (let i = 0; i < 5; i++) {
    setTimeout(function() {
      createEle(i);
    }, i * 1000);
  }
});

function createEle(value) {
  var d = $("<div></div>");
  d.addClass("d");
  d.html(value);
  $("#container").append(d);
}

.d {
  height: 20px;
  color: white;
  background: red;
  margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

</div>

Raison

var ne lâche pas l'affaire les liaisons de l'environnement lexical parent Ainsi, sa valeur hissée est conservée dans le gestionnaire de rappel asynchrone (de type setTimeout ), mais let ne retient pas les liaisons d'un environnement lexical autre que le sien.

Answer 2

S'il vous plaît mettez à jour votre code. pas besoin de boucle for.

var i=1;
$(document).ready(function() {

  setInterval(function() {
      createEle(i);
    }, i * 1000);
});

function createEle(value) {
  var d = $("<div></div>");
  d.addClass("d");
  d.html(value);
  $("#container").append(d);
  i++;
}

Answer 3

La boucle sera complètement exécutée avant la première setTimeout fonctionne. La valeur de l'i sera donc de 5

Traiter setTimeout y setInterval comme une fonction asynchrone.

$(document).ready(function() {
  var i = 0;
  var tmer = setInterval(function() {
    createEle(i);
    i = i + 1;
    if(i==5)
      clearInterval(tmer);
  }, 1000);

});

function createEle(value) {
  var d = $("<div></div>");
  d.addClass("d");
  d.html(value);
  $("#container").append(d);
}

.d {
  height: 20px;
  color: white;
  background: red;
  margin-bottom: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">

</div>