Animiertes Bild bewegt sich nicht während langer JavaScript-Methode Anruf

Question

Während einer Methode, die für 10 Sekunden, um einige Elemente zu dem HTML-Code, das animierte gif überhaupt nicht bewegen, geben das Gefühl, dass die Webseite festgefahren ist. Irgendwie in der Nähe.

Beispielcode:

 
    $('#button).click(function() { 
     showAnimatedGif(); 
     longRunningMethod();  
     hideAnimatedGif(); 
    }); 

Ein Weg, um dies ist die langen Laufverfahren in mehreren Schritten Auflösung und Animieren auf diese Weise, aber dann haben Sie Ihren Code auf diese Weise für jedes langes laufendes Verfahren zu schreiben.

Fragen Sie sich, ob es irgendeinen anderen Weg gibt, dies zu tun?

Answer 1

Der einzige Weg, um sicherzustellen, dass die Animation tatsächlich auftritt, ist für longRunningMethod, um den Browser in regelmäßigen Abständen zu liefern. Es ist nicht ungewöhnlich, dass der UI-Rendering-Thread den JavaScript-Thread blockiert. Änderungen am DOM werden erst angezeigt, wenn der JavaScript-Thread das nächste Mal ausgeführt wird. Sie können mit setTimeout mit einem Timeout von 0 (die länger als 0ms   — offensichtlich   — auf den meisten Browser-Implementierungen sein wird, geben; viele klammern diesen Wert auf mindestens 4 ms und möglicherweise so viel wie 10ms).

Beispiel: Hier ist ein Skript, das 500 divs fügt hinzu, aber gibt der Browser keine Möglichkeit, die laufenden Arbeiten zu zeigen, oder (meist) alles animieren:

jQuery(function($) { 

    $("#btnGo").click(function() { 
    var n; 

    display("Loading..."); 

    for (n = 0; n < 500; ++n) { 
     $("<div/>").html("Div #" + n).appendTo(document.body); 
    } 

    display("Done loading"); 

    function display(msg) { 
     $("<p/>").html(msg).appendTo(document.body); 
    } 
    }); 

});​ 

Live example * Example with spinner graphic

Wie können Sie Sehen Sie, es gibt niemals nach, und wenn Sie auf die Schaltfläche klicken, erstarrt die Seite für einen Moment, und dann erscheinen alle 500 Divs und die Nachrichten.

Kontrast mit diesem anderen Ende des Spektrums, der zwischen jedem div ergibt:

jQuery(function($) { 

    $("#btnGo").click(function() { 
    display("Loading..."); 

    addDivs(0, 500, function() { 
     display("Done loading"); 
    }); 

    function addDivs(current, max, callback) { 
     if (current < max) { 
     $("<div/>").html("Div #" + current).appendTo(document.body); 
     setTimeout(function() { 
      addDivs(current + 1, max, callback); 
     }, 0); 
     } 
     else { 
     callback(); 
     } 
    } 

    function display(msg) { 
     $("<p/>").html(msg).appendTo(document.body); 
    } 
    }); 

});​ 

Live example * Example with spinner graphic

Da die Ausbeuten Sie die unfertigen sehen können.

Sie werden feststellen, dass das zweite Skript in Echtzeit länger dauert, möglicherweise sogar viel länger, um das gleiche Ergebnis zu erzielen. Dies liegt daran, dass die Erträge Zeit benötigen, ebenso wie der Browser die Anzeige aktualisiert. In der Praxis wollen Sie ein Gleichgewicht zwischen dem ersten Beispiel und dem zweiten Beispiel finden, das oft genug zum Fortschritt zeigt, aber nicht so oft, dass der Prozess unnötig lange dauert.

Answer 2

Wenn Ihre lang laufende Methode einen synchronen Ajax-Aufruf ausführt. Verwenden Sie die asynchrone Option für die offene Methode.

xmlHttp.open('POST', ajaxurl, true); 

Damit können Sie Ihre drehenden Grafiken drehen.