Wie funktioniert setTimeout() in JavaScript?

Question

In meinem Code möchte ich eine Linie zeichnen. Dafür setze ich Punkte nach der Geradengleichung. Und ich möchte auch eine Verzögerung von 100 Millisekunden, bevor der nächste Punkt gedruckt wird. Also habe ich setTimeout() verwendet. Aber wenn ich diesen Code ausführe, wartet er zunächst einige Zeit und druckt dann alle Punkte auf einmal ohne Verzögerung von 100ms. Hier ist mein Code für das Zeichnen Linie:

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

Jede Hilfe wird sehr geschätzt.

Answer 1

Verwendung setInterval() anstelle von setTimeout

Answer 2

for-loop ist non-blocking alle setTimeout Instanzen in einer Schleife wird ausgeführt, sobald die Dauer angegeben ist abgeschlossen.

a counter erhalten und als ein Argument in millisecondssetTimeout() verwenden, so dass jede Behandlungsroutine in einer Schleife wird in dem Vielfachen von 100 aufgerufen werden (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); 
 
}