Ohne JavaScript Sleep(), wie verzögere ich meine DOM-Änderungen?

Question

Ich habe die Forschung gemacht, also weiß ich zu schätzen, dass es in JavaScript keine Methode sleep() gibt. Was ich nicht herausfinden kann, ist die richtige Alternative für mich, weil setTimeout() meine Situation aufgrund seiner asynchronen Natur nicht löst.

Mein Programm analysiert die Eingabe von Benutzern und führt es in einer eval() -Anweisung aus. Der ausführende Code ruft Funktionen auf, die ich bereits geschrieben und den Benutzern zur Verfügung gestellt habe. Zu diesen Funktionen gehört das Zeichnen (Farbe), mit dem ein farbiges Quadrat an einer vom Benutzer definierten Stelle auf dem Bildschirm platziert wird. Es ist nicht unbedingt relevant für die Frage, aber wenn Sie wissen wollen, ich mache nur eine <div> und eine semi-transparente <img> mit den richtigen Höhen einfügen.

Jetzt ist hier, wo ich die Schlaf-Funktion möchte: Wenn der Benutzer viele Quadrate zeichnet, zeigt Javascript sie alle auf einmal, aber ich möchte sie nacheinander anzeigen, mit einer Verzögerung, die ich steuern kann. Dies kann nicht mit setTimeout() durchgeführt werden. Der Versuch, selbst eine Verzögerungsfunktion zu schreiben, die Start- und Endzeiten berechnet, wird den Browser einfach einfrieren, und glauben Sie mir, ich habe es ausprobiert und es zeichnet immer noch alles , nachdem eingefroren wurde.

Mein Instinkt ist, einen Schlaf() Anruf als letzte Zeile meiner draw() Methode, so dass jedes Quadrat, das der Benutzer in ihrem Code erstellt z. 200 ms zu rendern, aber keine solche Funktion existiert.

Oh JavaScript Gurus, wie bekomme ich diese Art von Funktionalität in einer Webseite, wenn Javascript nicht schlafen wird?

ideal:

function draw() { 
    var easel = document.getElementById("canvas"); 
    var square = document.createElement("div"); 
    square.setAttribute("..."); 
    easel.appendChild(square); 

    window.sleep(200); 
} 

Answer 1

Da Sie die Funktionen Ihrer Nutzer fordern steuern, könnten Sie draw ändern die Quadrate in einer Warteschlange zu platzieren. Dann leeren Sie diese Warteschlange langsam und zeichnen jeweils ein Rechteck.

die Situation Einige Pseudo-JS zu beschreiben:

// Collection of things to render 
var rectangles = []; 

// This is the function you have users call for drawing a rectangle 
function draw(color) { 
    rectangles.push(new Rectangle(color)); 
    // do other stuff 
    queueRender(); 
} 

// Slowly draw each rectangle 
function queueRender() { 
    if (alreadyQueued) { 
    return; 
    } 
    alreadyQueued = true; 

    setTimeout(function drawQueue() { 
    var rectangle = rectangles.shift(); // Get the first rectangle 
    if (!rectangle) { 
     alreadyQueued = false; 
     return; 
    } 
    render(rectangle); 
    setTimeout(drawQueue, 200); 
    }); 
}