CSS Animationen abgewürgt, wenn JavaScript-Funktion läuft

Lassen Sie uns sagen, ich habe diese Javascript-Funktion:CSS Animationen abgewürgt, wenn JavaScript-Funktion läuft

function pauseComp(ms) { 
    var date = new Date(); 
    var curDate = null; 
    do { curDate = new Date(); } 
    while(curDate-date < ms); 
    }

und eine css3 Animation (zum Beispiel <i class="icon-spinner icon-spin"></i> aus dem neuen font-awesome 3). Wenn ich die JavaScript-Funktion oben ausführe, stoppt es den Dreher, während die Funktion läuft. Siehe, worüber ich spreche here. Grundsätzlich stoppt Javascript CSS-Animationen, und ich frage mich, warum, oder wenn jemand anderes dies bemerkt hat/eine Workaround gefunden. Ich habe versucht, es in eine setTimeout (Fn, 0), wo Fn ist der lange Prozess, aber dann realisiert, warum das auch nicht funktioniert (js ist nicht Multithread). Hat das jemand gesehen?

Update: Interessanterweise sieht es in Safari nicht so aus, obwohl die Interaktion mit der Browser-Oberfläche immer noch beeinträchtigt ist.

Quelle

2013-01-16 Christian Bankester

Sie müssen Ihren "long running code" in Blöcke aufteilen, damit alles andere weiterlaufen kann. –

Richtig, obwohl mir bewusst ist, dass dies das Problem beheben würde, ist das keine brauchbare Lösung für die Funktionen, auf die ich das anwenden möchte. Die Funktionen sind nicht in kleinere Stücke zerbrechlich. Ich überprüfe wirklich, ob jemand eine Lösung für das genaue oben genannte Problem hat, das ebenfalls nicht aufgelöst werden kann. –

Eine Browserseite ist single threaded. Das Aktualisieren der Benutzeroberfläche geschieht im selben Thread wie Ihr Javascript-Programm. Das bedeutet auch, dass bei jeder Animation während der Ausführung von Javascript-Code keine neuen Frames gezeichnet werden. In der Regel ist dies keine große Sache, da der meiste JS-Code sehr schnell und schneller als ein einzelner Animationsrahmen ausgeführt wird.

Also der beste Rat ist einfach das: Tu das nicht. Blockiere die JS-Engine nicht so lange. Finde einen saubereren Weg, es zu tun.

Allerdings, wenn Sie müssen, gibt es einen Weg. Sie können einen zusätzlichen Thread über HTML5's Web Workers API erhalten. Dies wird in älteren Browsern nicht unterstützt, aber es ermöglicht Ihnen, einen lang laufenden CPU-Quellcode weg von der Hauptwebseite und in einem eigenen Thread auszuführen und dann ein Ergebnis auf Ihre Seite zu posten, wenn es fertig ist.

Quelle

2013-01-16 20:34:22

Ja, ich habe Webarbeiter gesehen. Wissen Sie, ob Web-Mitarbeiter Zugriff auf das DOM haben? Weil mein langwieriger Prozess alle DOM-Aktualisierungen in jQuery passiert, und das ist, was langsam ist. –

@ChristianBankester Web Worker können nicht auf das DOM zugreifen. Sie müssen 'setTimeout' verwenden. – bfavaretto

Ah, ich habe versucht mit setTimeout, was nicht funktioniert hat. Sehen Sie diese aktualisierte jsfiddle: http://jsfiddle.net/JU4St/2/ –

CSS Animationen abgewürgt, wenn JavaScript-Funktion läuft

Antwort

Verwandte Themen