How does setTimeout() work in JavaScript? [duplicate]

Question

In my code, I want to draw a line. For that I am putting points according to the equation of line. And I also want delay of 100 milliSec before next point is printed. So, I used setTimeout(). But when I run this code, first it waits for some time and then prints all the point at a time without delay of 100ms. Here is my code for drawing line:

function drawLine(x1, y1,x2,y2){

    var x, y, m;
    m=(y2-y1)/(x2-x1);

    for(x=x1;x<=x2;x++){
        y=(m*(x-x1)+y1)/6;
        setTimeout(drawPoint,100,x,y);
    }

}

function drawPoint(a,b){

    main=document.getElementById("main");     //parent div tag in which children div tags are to be appended
    var children=main.childNodes;
    var child=document.createElement("div");

    child.className="anime";
    child.style.left=a+"px";
    child.style.top=300-b+"px";             //300 is some offset

    main.appendChild(child);     
}

Any help will highly be appreciated.

setTimeout does not pause the loop, so they are effectively all set at the same instant with the same delay. Also, additional arguments beyond 2 are not supported by all browsers. — RobG
– RobG, Commented Apr 20, 2016 at 13:11

Rayon · Accepted Answer · 2016-04-20 13:12:19Z

for-loop is non-blocking, all the setTimeout instances in a loop will execute once duration specified is completed.

Maintain a counter and use it as a milliseconds argument in setTimeout() so that every handler in a loop will be invoked in the multiples of 100(100,200,300,...)

function drawLine(x1, y1, x2, y2) {
  var x, y, m;
  m = (y2 - y1) / (x2 - x1);
  var counter = 1;
  for (x = x1; x <= x2; x++) {
    y = (m * (x - x1) + y1) / 6;
    setTimeout(drawPoint, (100 * counter), x, y);
    ++counter;
  }
}

function drawPoint(a, b) {
  main = document.getElementById("main"); //parent div tag in which children div tags are to be appended
  var children = main.childNodes;
  var child = document.createElement("div");
  child.className = "anime";
  child.style.left = a + "px";
  child.style.top = 300 - b + "px"; //300 is some offset
  main.appendChild(child);
}

Harish Kumar · Accepted Answer · 2016-04-20 13:14:38Z

1

Use setInterval() instead of setTimeout

answered Apr 20, 2016 at 13:14

Harish Kumar

1436 bronze badges

1 Comment

RobG Over a year ago

That is not a useful answer.

Collectives™ on Stack Overflow

How does setTimeout() work in JavaScript? [duplicate]

2 Answers 2

Comments

1 Comment

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Linked

Related