animazioni CSS stallo durante l'esecuzione di javascript funzione

Question

Diciamo ho questa funzione javascript:

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

e un'animazione CSS3 (per esempio, <i class="icon-spinner icon-spin"></i> dal nuovo font-awesome 3). Quando eseguo la funzione javascript sopra, interrompe lo spinner mentre la funzione è in esecuzione. Vedere di cosa sto parlando here. Fondamentalmente, javascript interrompe le animazioni CSS, e mi chiedo perché, o se qualcun altro ha notato questo/trovato una soluzione alternativa. Ho provato a metterlo in un setTimeout (fn, 0), dove fn è il processo lungo, ma poi ho capito perché anche questo non funzionerà (js non è multithread). Qualcuno ha visto accadere questo?

Aggiornamento: È interessante notare che questo non è tanto un problema in Safari, anche se l'interazione con l'interfaccia del browser è ancora interessata.

Answer 1

Una pagina del browser è a thread singolo. L'aggiornamento dell'interfaccia utente avviene sullo stesso thread del programma javascript. Il che significa anche che qualsiasi animazione non disegnerà nuovi frame mentre il codice Javascript è in esecuzione. In genere, questo non è un grosso problema perché la maggior parte del codice JS viene eseguita molto rapidamente, più velocemente di un singolo frame di animazione.

Quindi il consiglio migliore è semplicemente questo: non farlo. Non bloccare il motore JS per così tanto tempo. Scopri un modo più pulito per farlo.

---

Tuttavia, se è necessario, c'è un modo. È possibile ottenere un thread aggiuntivo tramite HTML5's Web Workers API. Questo non è supportato nei browser più vecchi, ma ti permetterà di eseguire un po 'di codice di succhiamento della CPU a lunga distanza dalla pagina web principale e nella sua stessa thread, e poi di postare alcuni risultati alla tua pagina una volta terminato.