¿Espere la superposición modal antes de esperar una función con una gran carga de trabajo sin setTimeout()?

StackOverflow https://stackoverflow.com/questions/1595082

Pregunta

Este es un ejemplo simplificado, para asegurarse de que no haya funciones de animación/desvanecimiento asincrónicas involucradas.

Quiero que el fondo sea rojo cuando la función con mucha carga de trabajo funcione y se vuelva negro cuando esté lista.Lo que realmente sucede es que la mayoría de las veces el fondo se volverá directamente negro, una vez que la función esté lista.No verá un fondo rojo, incluso si está esperando que reciba una alerta de "hecho".

¿Existe una solución mejor que esperar unos milisegundos con setTimeout para que el fondo cambie a rojo?Llamar a work() directamente produce el problema.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Test</title>
<script type='text/javascript'>
function work()
{
    var i, a;
    a = [];
    for(i = 0; i < 250000; i++)
    {
        a.push(Math.random());
    }
    a.sort();
    document.getElementsByTagName('body')[0].style.background = '#000000';
    alert('done');
    return true;
}

window.onload = function() {
    document.getElementsByTagName('body')[0].style.background = '#ff0000';
    //work();
    setTimeout(work, 100);

};
</script>
</head>
<body>
<h1>Test</h1>
</body>
</html>
¿Fue útil?

Solución

La "ventana emergente modal" está ahí para evitar que el script bloquee completamente (para siempre) el navegador y haciendo que el usuario esté realmente molesto.Este guardia no es detectable en el código JS y pausa la ejecución de JS que sigue a un sincrónico modelo.es para salvarte, escribir código que no bloquee!En realidad, es bastante fácil configurar la mayoría de los cálculos para que sean reanudables y cancelables mediante el uso de procesadores/cierres o colas.

De todos modos ...En mi experiencia, un "retraso" de 1 ms es suficiente en FF3.5 (Win) e IE6-8 para actualizar el CSS (lo más probable es que el retraso real sea más de 1 ms).Esto fuerza la "cola" de la publicación del evento. dentro del modelo sincrónico lo cual, al menos en los casos anteriores, permite aplicar los estilos CSS antes de que continúe la ejecución de JS.Creo que Prototype.js usa un valor de 0 ms para su función de "retraso", pero no soy tan valiente.

Además, 'documento.cuerpo' :-)

(Estoy bastante seguro de que no hay una manera "mejor", aunque todo este enfoque huele a mercado de pescado al aire libre).

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top