CSS Animacje stoisko podczas uruchamiania funkcji javascript

Question

Powiedzmy mam tej funkcji javascript:

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

i animacji CSS3 (na przykład <i class="icon-spinner icon-spin"></i> z nowej font-awesome 3). Kiedy uruchomię powyższą funkcję javascript, zatrzyma ona pokrętło, gdy funkcja będzie działać. Zobacz, co mówię o here. Zasadniczo javascript zatrzymuje animacje css i zastanawiam się, dlaczego lub jeśli ktoś inny zauważył to/znalazł obejście. Próbowałem umieścić go w setTimeout (fn, 0), gdzie fn jest długim procesem, ale potem zrozumiałem, dlaczego to też nie zadziała (js nie jest wielowątkowe). Ktoś to widział?

Aktualizacja: Ciekawe, wygląda na to, że nie stanowi to większego problemu w Safari, chociaż interakcja z interfejsem przeglądarki wciąż jest zakłócona.

Answer 1

Strona przeglądarki jest pojedyncza. Aktualizacja interfejsu użytkownika odbywa się w tym samym wątku, co program javascript. Co oznacza także, że żadna animacja nie rysuje nowych klatek podczas wykonywania kodu JavaScript. Zazwyczaj nie jest to wielka sprawa, ponieważ większość kodu JS jest wykonywana bardzo szybko, szybciej niż pojedyncza klatka animacji.

Najlepsza rada to po prostu: nie rób tego. Nie blokuj silnika JS przez tak długi czas. Znajdź dokładniejszy sposób na zrobienie tego.

---

Jednakże, jeśli musisz, istnieje sposób. Możesz uzyskać dodatkowy wątek przez HTML5's Web Workers API. Ta funkcja nie jest obsługiwana w starszych przeglądarkach, ale pozwala na uruchomienie długiego kodu wysysającego procesor z głównej strony internetowej i własnego wątku, a następnie wysłanie jej z powrotem na stronę po jej zakończeniu.