2009-07-30 9 views
8

Sto utilizzando la proprietà innerHTML per modificare dinamicamente uno DIV, per segnalare un processo che richiede alcuni secondi. Il problema è che su Firefox la pagina non viene effettivamente ridisegnata per riflettere quella modifica fino a quando lo script non è finito. Questo rende l'app delicata. C'è un modo per assicurarti che le modifiche al codice HTML vengano visualizzate immediatamente, anche se sono in esecuzione altri script?Come posso forzare il redraw del browser mentre il mio script sta elaborando un processo pesante?

risposta

14

Il browser è a thread singolo. Mentre lo script è in esecuzione, il browser non può fare nient'altro. Se vuoi fare qualcosa come un indicatore di avanzamento, devi usare setTimeout() o setInterval() e suddividere l'attività in blocchi più piccoli che vengono eseguiti su un intervallo. Ciò lascia degli intervalli tra le esecuzioni degli script, restituendo il controllo al browser, in cui il browser può essere ridisegnato.

+0

Sembra non essere il caso che il browser sia a thread singolo. Ha un thread javascript ma c'è un thread parallelo che rende la pagina e manipola il DOM –

+0

Questo dipende molto dal * quale * browser stai parlando. Alcuni potrebbero farlo ora, come Chrome con il suo modello multiprocesso, in cui il contenuto di ciascun browser è un processo separato, e il chrome è anche sul proprio processo. ma puoi ancora facilmente bloccare qualsiasi browser con 'while (1)'. Quanto del browser si blocca dipende da come viene costruito il browser. – Breton

+0

Puoi appendere thread js chiamando while (1) {}, ma ciò non significa che non ci siano altri thread usati per manipolazione dom o rendering di contenuti. Significa che il thread JS può eventualmente bloccare l'esecuzione di altri thread. E i thread potrebbero non avere alcuna relazione con il modello di processo del browser (un processo per pagina o un processo per l'intera finestra del browser) –

6

Provare a interrompere periodicamente lo script. Dovreste essere in grado di utilizzare

setTimeout(nextFunction, 0); 

per fornire l'interruzione necessaria, senza un lungo ritardo, dove nextFunction è la funzione che continua con la lunga elaborazione.

Problemi correlati