Forza aggiornamento DOM immediato modificato con jQuery in funzione long-running

Question

Ho un javascript che richiede circa 2 secondi per eseguire (algoritmo di ottimizzazione complesso). Voglio impostare un certo span su "working ..." all'inizio della funzione. Osservo che lo span non cambia fino alla fine della funzione.

Come posso forzare la propagazione delle modifiche DOM? o dovrei affrontare questo in modo diverso tutti insieme?

Io chiamo la funzione da onclick sul pulsante.

La funzione è qualcosa di simile:

function optimize() { 
    $('#status').text('working...'); 
    // calculate for 2 seconds 
    $('#status').text('done!'); 
} 

Answer 1

Prova avvolgendo il codice in esecuzione a lungo in una chiamata setTimeout:

function optimize() { 
    $('#status').text('working...'); 
    window.setTimeout(function() { 
     // calculate for 2 seconds 
     $('#status').text('done!'); 
    }, 0); 
} 

Ciò impone un nuovo stack di chiamate per il codice in esecuzione lungo, permettendo al ridisegno (modifica del testo) da completare prima che il nuovo stack di chiamate inizi l'esecuzione.