Forzar una actualización de DOM en Internet Explorer después de la manipulación de JavaScript ja

Question

Aquí está la situación. Tengo algo de JavaScript que tiene este aspecto:

function onSubmit() { 
    doSomeStuff(); 
    someSpan.style.display="block"; 
    otherSpan.style.display="none"; 
    return doLongRunningOperation; 
} 

Cuando hago esta forma presentar la acción, y ejecutarlo desde un navegador que no sea Internet Explorer, se intercambia rápidamente la visibilidad dos vanos y ejecutar la operación a largo Javascript. Si hago esto en IE, no hace el intercambio hasta después de que onSubmit() vuelva completamente.

puedo forzar un dom redibujar por pegar un cuadro de alerta de este modo:

function onSubmit() { 
    doSomeStuff(); 
    someSpan.style.display="block"; 
    otherSpan.style.display="none"; 
    alert("refresh forced"); 
    return doLongRunningOperation; 
} 

Además, la refactorización jQuery obvio no afecta el comportamiento de IE:

function onSubmit() { 
    doSomeStuff(); 
    $("#someSpan").show(); 
    $("#otherSpan").hide(); 
    return doLongRunningOperation; 
} 

Este comportamiento existe en IE8 e IE6. ¿Hay alguna forma de forzar un redibujado del DOM en estos navegadores?

Answer 1

Puede su longRunningOperation ser llamado de forma asíncrona?

Answer 2

Mozilla (tal vez IE también) almacenará en caché/retrasará la ejecución de cambios en el DOM que afectan la visualización, para que pueda calcular todos los cambios a la vez en lugar de repetidamente después de cada instrucción.

Para forzar una actualización (para forzar un reflujo o retransmisión síncrono inmediato), su javascript debería leer una propiedad que se ve afectada por el cambio, p. la ubicación de algunosSpan y otrosSpan.

(Este detalle de implementación de Mozilla se menciona en el video Faster HTML and CSS: Layout Engine Internals for Web Developers.)

Answer 3

También puede ajustar su función a largo plazo en setTimeout (function() {longTerm();}, 1);

Answer 4

Para continuar con lo que dice ChrisW:

Aquí está el lavado de la escritura a parpadear DOM, por lo que no tiene que alerta de llamada (""); (Que se encuentra en http://amolnw.wordpress.com/category/programming/javascript/):

function flushThis(id){ 
    var msie = 'Microsoft Internet Explorer'; 
    var tmp = 0; 
    var elementOnShow = document.getElementById(id); 
    if (navigator.appName == msie){ 
     tmp = elementOnShow.parentNode.offsetTop + 'px'; 
    }else{ 
     tmp = elementOnShow.offsetTop; 
    } 
} 

Funciona para mí !!! Gracias por la sugerencia.

Answer 5

Tuve este problema en Chrome 21 arrastrando una palabra que tenía una letra con un descendiente ('g'). Estaba dejando un rastro de polilla en la pantalla, que desaparecería la próxima vez que algo refrescara la pantalla. La solución de ChrisW (interrogar a una propiedad sensible al diseño) no funcionó.

Lo que hizo el trabajo era añadir un div en blanco de 1 píxel en la parte superior de la página, luego lo elimina una milésima de segundo después, llamando a la raíz de la función al final de la operación de arrastre:

// Needed by Chrome, as of Release 21. Triggers a screen refresh, removing drag garbage. 
function cleanDisplay() { 
    var c = document.createElement('div'); 
    c.innerHTML = 'x'; 
    c.style.visibility = 'hidden'; 
    c.style.height = '1px'; 
    document.body.insertBefore(c, document.body.firstChild); 
    window.setTimeout(function() {document.body.removeChild(c)}, 1); 
} 

Nota: necesita la demora. Simplemente agregando y eliminando el div no funciona. Además, el div debe agregarse encima de la parte de la página que debe volver a dibujarse.

Answer 6

element.focus() funciona para mí en IE10

function displayOnOff(){ 
    var elm = document.getElementById("myDiv"); 
    elm.style.display="block"; 
    elm.focus(); 
    for(var i=0; i<1000000; i++){ 
     console.log("waiting..............."); 
    } 
    elm.style.display = "none"; 
}