javascript DoEvents

En javascript, mientras se procesa una función manejando un evento, no se pueden visualizar cambios gráficos en la ventana del navegador. La ventana del navegador se vuelve a pintar para reflejar el estado final actualizado por la función manejadora del evento.

Veámoslo con un ejemplo. Imaginemos que tenemos un botón que va a realizar una larga operación de cálculo, y deseamos informar al usuario de que se está realizando una operación de este tipo mediante un mensaje en pantalla como "Procesando la información, por favor, espere...". Dicho mensaje deberá desaparecer de la pantalla una vez se termine el proceso. Para ello podríamos encerrar el texto en una división, que sería oculta inicialmente:

<div id="mensaje" style="display:none;">Procesando la información, por favor, espere...</div>

, posicionado en el lugar donde deba aparecer.

El botón podría ser:

<input type="button" value="CALCULAR" onclick="MANEJADORDEEVENTOSonclick();">

El manejador de eventos debería contener:

<script type="text/javascript">

function MANEJADORDEEVENTOSonclick()
{
     var mensaje=document.getElementById("mensaje");

     mensaje.style.display="block"; //muestra el mensaje
     calcular(); //calcula
     mensaje.style.display="none"; //oculta el mensaje
}

</script>

Pero ésto, simplemente, no funciona como esperaríamos. Jamás se visualizará el mensaje, ya que mensaje.style.display vale "none" tanto antes como después de ejecutarse completamente el manejador de eventos.

Nuestra primera intención para solucionar el problema podría ser llamar a alguna función que detuviera por unos momentos la ejecución de este manejador de eventos y atendiera a otros eventos pendientes:

<script type="text/javascript">

function MANEJADORDEEVENTOSonclick()
{
     var mensaje=document.getElementById("mensaje");

     mensaje.style.display="block"; //muestra el mensaje
     DOEVENTS(); //ESTA FUNCION NO EXISTE EN JAVASCRIPT
     calcular(); //calcula
     mensaje.style.display="none"; //oculta el mensaje
}

</script>

Aquí he hecho una llamada a una función doevents() que NO EXISTE EN JAVASCRIPT. Tampoco existe algo como sleep(1000), ni nada por el estilo, para dormir el hilo de ejecución.

Así que lo que hay que hacer es descomponer el manejador de eventos en dos funciones. La segunda función será llamada mediante un disparador de reloj, usando una llamada a window.setTimeout(funcion(), numero_de_milisegundos); que ejecutará la función dada cuando hayan transcurrido los milisegundos dados:

<script type="text/javascript">

function MANEJADORDEEVENTOSonclick()
{
     var mensaje=document.getElementById("mensaje");

     mensaje.style.display="block"; //muestra el mensaje

     window.setTimeout(MANEJADORDEEVENTOSsegundaparte(), 100);
}

function MANEJADORDEEVENTOSsegundaparte()
{
     calcular(); //calcula

     var mensaje=document.getElementById("mensaje");
     mensaje.style.display="none"; //oculta el mensaje
}

</script>

En realidad no hace falta poner una gran cantidad de milisegundos, con 100 bastará para que el intérprete javascript del navegador haya decidido pintar la pantalla actualizando gráficamente mensaje.style.display con el valor "block", para que se vea.

Este truco de implementación también es necesario cuando se hace una depuración de código en tiempo real. Las variables que se desean visualizar se colocan en una división encima de la pila de zIndex, para que siempre esté visible. Se pueden recalcular y visualizar cambiando innerHTML de dicha división, por ej, al final del manejador de eventos mousemove. Pero si se desea visualizar su estado enmedio del procesado de otro manejador de eventos, no queda más remedio que volver a usar este truco.






blog28 - javascript DoEvents - - -SUSCRIPCIONES - - -http://www.rojasdelgado.com