Forzar actualización de DOM inmediata modificada con jQuery en la función de larga ejecución

Question

Tengo un javascript que tarda unos 2 segundos en ejecutarse (algoritmo de optimización complejo). Quiero establecer cierto tramo para "trabajar ..." al comienzo de la función. Observo que el lapso no cambia hasta el final de la función.

¿Cómo puedo forzar la propagación de cambios DOM? o debería abordar esto de manera diferente todos juntos?

Llamo a la función desde clic en el botón.

La función es algo así como:

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

Answer 1

trate de envolver el código de larga ejecución en una llamada setTimeout:

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

Esto obliga a una nueva pila de llamadas para el código de larga ejecución, permitiendo que el repinte (cambio del texto) para completar antes de que la nueva pila de llamadas comience la ejecución.