JavaScript für Schleife Problem beim Zeichnen Objekt

Question

Irgendwie habe ich meine Nachforschungen und fand heraus, Javascript ist single threaded!. Ich habe versucht, herauszufinden, wie man Animation über for loop in Javascript machen.

Das habe ich bisher gemacht. Ich versuche, ein Objekt auf einer Leinwand mit Javascript zu zeichnen. Es läuft die Schleife es geht nicht Schritt für Schritt. Es wird nur die Schleife ausgeführt und einmal statt 10 Mal gezeichnet und ignoriert die Timeout-Funktion. .

In einer einzigen Instanz, es zog (P/S Ignorieren Sie die Ursache mehrere Version ich es testete so entfernte ich die context.clearRect(0, 0, context.canvas.width, context.canvas.height);:

JS:

// down button click 
    down.onclick = function() { 
     if (!imgLoaded) return; 
     flag=false; 
     setTimeout(function() { 
    for(var i = 0; i < 15 ; i++) { 
    posY += 10; 
    context.drawImage(img, posX, posY); 
    }}, 9); 
    // call next step 

Answer 1

Das ist nicht wie setTimeout funktioniert.Auf die Art, wie Sie es geschrieben haben, ruft setTimeout seinen ersten Parameter einmal nach 9 ms auf und läuft dann ohne VerzögerungSie können die setInterval-Funktion verwenden (Vergessen Sie nicht, nach der 15. IterationInterval zu entfernen), wenn Sie ein reguläres Intervall aufgerufen werden möchten.

Beachten Sie, dass die angegebene Verzögerung in beiden Fällen (setTimeout, setInterval) nur indikativ ist.

Was Sie verwenden könnten, ist die Window.requestAnimationFrame()-Funktion, die die übliche Art ist, Animation im Browser zu tun.