Force mise à jour DOM immédiate modifiée avec jQuery en fonction de longue durée

Question

J'ai un javascript qui prend environ 2 secondes à exécuter (algorithme d'optimisation complexe). Je souhaite définir une certaine plage sur "working ..." au début de la fonction. Je constate que l'intervalle ne change pas jusqu'à la fin de la fonction.

Comment puis-je forcer la propagation des modifications DOM? ou devrais-je aborder cela différemment tous ensemble? J'appelle la fonction depuis onclick sur le bouton.

La fonction est quelque chose comme:

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

Answer 1

Essayez d'envelopper le code long en cours d'exécution dans un appel setTimeout:

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

Cela force une nouvelle pile d'appel pour le code long en cours d'exécution, ce qui permet la repeindre (changement du texte) pour terminer avant que la nouvelle pile d'appel commence l'exécution.