Synchroniczny/asynchroniczny charakter renderowania przeglądarki i wykonywania javascript

Question

Mam pewne przetwarzanie, które potrwa kilka sekund, więc chcę dodać wskaźnik wizualny, gdy jest on w toku.

.processing 
{ 
    background-color: #ff0000; 
} 

<div id="mydiv"> 
    Processing 
</div> 

Scenariusz:

$("#mydiv").addClass("processing"); 
// Do some long running processing 
$("#mydiv").removeClass("processing"); 

ja naiwnie myślałem, że klasa będzie stosowana do div i interfejs użytkownika będzie aktualizowana. Jednak uruchamianie tego w przeglądarce (przynajmniej w Firefoksie) div nigdy nie jest podświetlone. Czy ktoś może mi wyjaśnić, dlaczego mój div nigdy nie zostanie wyróżniony? Klasa jest dodawana, przetwarzanie odbywa się, a następnie klasa jest usuwana; interfejs użytkownika nie jest aktualizowany pomiędzy, a użytkownik nigdy nie widzi czerwonego tła.

Wiem, że JS jest jednowątkowe, ale zawsze zakładałem, że renderowanie przeglądarki będzie działało synchronicznie w czasie, gdy DOM jest aktualizowany. Czy moje założenie jest nieprawidłowe?

Co ważniejsze, jaki jest zalecany sposób osiągnięcia tego efektu? Czy konieczne jest użycie funkcji setTimeout, aby spowolnić przetwarzanie asynchroniczne i pracować z funkcją oddzwaniania? Musi istnieć lepszy sposób, ponieważ naprawdę nie potrzebuję tutaj zachowania asynchronicznego; Chcę tylko odświeżyć interfejs.

EDIT:

JSFiddle: http://jsfiddle.net/SE8wD/5/

(uwaga, może być konieczne, aby dostosować liczbę iteracji pętli, aby dać Ci rozsądny termin na własnym komputerze)

Answer 1

Force a redraw. Alternatywnie, użyj Soren's code, ponieważ przetwarzanie w wątku UI brzmi źle ...

Answer 2

Nie polecam zamrażać przeglądarki dla skryptu wagi. W tym przypadku wolę zmienić kod dla niezamarzającej przeglądarki i DOM. Jeśli w twoim kodzie jest jakaś pętla, możesz wywołać funkcję z opóźnieniem (używając setInterval) i zapisać gdzieś zmienną statusu. Na przykład:

for(var i=0; i<1000000; i++) { 
    // do something 
} 

Może być:

var i = 0; 
var intervalID; 
var _f = function() { 
    // do something 
    i++; 
    if(i==1000000) clearInterval(intervalID); 
} 
intervalID = setInterval(_f,1); 

lub coś podobnego i bardziej zoptymalizowane. Twój kod będzie nieco bardziej złożony i wolniejszy. ale zapobiegasz zawieszaniu się przeglądarki i możesz utworzyć zaawansowany pasek stanu wstępnego ładowania.

Answer 3

Prawdopodobnie należy przetworzyć przetwarzanie w oddzielnym wydarzeniu, takim jak to;

$("#mydiv").addClass("processing"); 
setTimeout(function(){ 
    // This runs as a seperate event after 
    // Do some long running processing 
    $("#mydiv").removeClass("processing"); 
},1); 

ten sposób przeglądarka powinna przerysować ekran z processing, natomiast krok długo działa ruszy jako imprezy indywidualne, i usunąć ten komunikat po zakończeniu przetwarzania.

Answer 4

Przeglądarka ma dość wolnego czasu na odświeżanie i czas ponownego naświetlania. Różne silniki wykazują różne zachowania. Aby uzyskać dalsze informacje, zobacz When does reflow happen in a DOM environment?. W twoim przykładzie przeglądarka widzi, że dodajesz klasę i usuwasz ją bezpośrednio po tym, więc może nie zrobić nic widocznego.

Aby tego uniknąć, można zastosować metodę "odświeżania-hacka" lub uczynić swoje obliczenia asynchronicznymi z WebWorkers lub setTimeout lub czymś podobnym.