create DOM elements by a limited interval with Jquery

Question

I want to create 1 div container every x second. And I want to do this n times.

So I started creating this

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

this works fine. But I want to integrate the time interval.

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

As you can see in the second example, I always get the wrong value because it passes in the wrong index value.

How can I fix that?

score 4 · Accepted Answer · answered Jan 02 '18 at 14:34

4

Replace var with let.

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

Demo

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

Reason

var doesn't let go of the bindings of the parent lexical-environment hence its hoisted value is retained in the asynchronous callback handler (of setTimeout), however let doesn't hold on to the bindings of any lexical-environment other than its own current one.

answered Jan 02 '18 at 14:34

gurvinder372

66,980
10
72
94

let is not working properly in IE – Negi Rox Jan 02 '18 at 14:37
why replace var with let? i want to know, really – plonknimbuzz Jan 02 '18 at 14:38
1

@plonknimbuzz I have given the reason in the answer itself. – gurvinder372 Jan 02 '18 at 14:39
This is amaze! +1 – TJBlackman Jan 02 '18 at 14:40
thanks mate. i will dig this with google – plonknimbuzz Jan 02 '18 at 14:48
@gurvinder372: if i use `const` and `let`, i will no need to use `var` anymore. because `var` is unclearable /ambiguous. is this true? – plonknimbuzz Jan 02 '18 at 17:19
1

@plonknimbuzz Both have their own uses as they do different things. Also `var` has **function scope** while `let` has **block scope**. – gurvinder372 Jan 03 '18 at 05:46

score 1 · Answer 2 · answered Jan 02 '18 at 14:34

please update your code. no need of for loop.

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++;
}

score 1 · Answer 3 · answered Jan 02 '18 at 14:36

Loop will completely executed before the first setTimeout runs. So the value of the i will be 5

Treat setTimeout and setInterval as a asynchronous function.

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

create DOM elements by a limited interval with Jquery

3 Answers3