Imagenes en segundo plano

[Dacar010]

Buenas Tardes.

No sé si debo formular mi consulta aquí o en el foro de JavaScript, espero que al menos me podais orientar.

Resulta que tengo una aplicacion en AJAX a la que le he hecho un buscador basado en texto predictivo (como el de los telefonos móviles), según vamos insertando texto al buscador nos va devolviendo un grid a una capa donde van cargando los resultados coincidentes con la cadena insertada en la caja de búsqueda, filtrando de este modo aquellos no coincidentes y ganando un dinamismo muy fluido. Hasta aquí todo perfecto.
Me encontre con el incoveniente de que explorer no es capaz de responder cuando la consulta devuelve grandes volumenes de datos (por ejemplo si la consulta devuelve 1000 tuplas el puñetero explorer casca) por lo que opté por crear un par de métodos en el script del cliente para hacer llamadas en segundo plano. Me explico:

1. Al insertar la cadena de texto llamo al servidor y pregunto el numero de tuplas que me va a devolver.
2. Una vez conozco el número de tuplas divido este total entre 100 y obtengo el numero de llamadas que debo hacer.
3. Devuelvo ese número de llamadas a un método del cliente (método 1)
4. En el cliente ejecuto un bucle que llama de nuevo al servidor limitando la consulta de 100 en 100
5. Por cada peticion de llamada que recibe el servidor ejecuta una llamada a otro método del cliente (método 2), encargado de recorrer el array que genero la consulta (ya con su LIMIT de 100 en 100), e ir pintando en una capa el grid que obtenemos como resultado

La idea, por lo tanto, es recibir los 100 primeros resultados, pintarlos en el navegador, y continuar procesando las respuestas que se van obteniendo en las sucesivas llamadas, las cuales se van añadiendo en tiempo real. De esta manera el cliente no tiene que esperar a recibir el resultado completo de la consulta para pintar los datos.

Y mas o menos funciona.... El problema es que este grid (que se trata de un control de equipos operativos en una intranet) según el estado nos devuelve un "UP" o "DOWN" en el array de la consulta y en base a esto en el navegador se tiene que pintar un botón (imagen .gif) de color rojo o verde y estas imagenes no se pintan mientras esta recibiendo datos... Se pinta el nombre del equipo, su dirección MAC, etc pero el dichoso boton no hay manera de mostrarlo hasta que no se ha descargado el listado completo. Eso y que el explorer se queda pillado hasta que no acaba con todas las llamadas.

En un primer momento supuse que se debia a la existencia de las iteraciones del método 1 por lo que use un setInterval() para realentizar el proceso y darle tiempo a que se ejecutase el metodo 2 sin que este recibiera continuas llamadas desde el servidor. Como no sirvió de nada probé a hacer lo mismo pero esta vez desde el lado del servidor con usleep() y aquí lo que si noté es que se pintaba el resultado cuando este era texto (nombre del equipo, mac...) amen que salia secuencialmente (si no hago pausa en la ejecucion en el servidor, el grid resultante sale desordenado) pero las imagenes no existe forma de pintarlas hasta que no ha recibido el listado entero de todas las consultas que tienen lugar...

Siento el tostón pero es que ya he mirado en todos sitio y no doy con el modo de arreglarlo.
Espero que alguien me pueda echar una mano.
Gracias y saludos.

[David]

Es un poco complicado, debido a que es difícil hacer pruebas concretas con las cuales reproducir el problema.

Lo que sí puedo sugerirte es en cuestión de usabilidad y de aprovechamiento de recursos. Debes tener en cuenta que al usuario promedio no le va a resultar útil tener en frente los 1.000 registros que coincidan con el texto que está escribiendo. Por lo que lo mejor es sólo obtener los registros relevantes y esperar a una acción del usuario (un scroll por ejemplo) para obtener el resto de los datos. Así no mantendrás la red tan ocupada y puede que también tengas menos problemas con las imágenes.

[Dacar010]

Muchas gracias por tu respuesta David.

Ya sé que es complicado aunque la mecánica es sencilla procesar en segundo plano solicitudes e ir sumando al listado...

No he probado a asociarle un evento al scroll de la capa, no era lo que tenia mente, pero no lo descarto como opcion, quizas de esta manera consiga mejores resultados. De cualquier manera el tema es interesante ya que es algo que considero que debe darse mucho ya que los grandes conjuntos de registros para segun que aplicaciones son algo bastante frecuente y si nos ae el desarrollo en ajax considero que las peticiones en segundo plano son vitales de cara a no tener al cliente esperando como bobo.

Lo que si he detectado (con el firebug) es que lo que realentiza la ejecución (el navegador se queda tonto durante el proceso) mas que el volumen de datos enviados (ni siquiera uso JSON sino un array multidimensional que he creado conveniente en el servidor) es el metodo que pinta el grid (método 2) este recorre ese array y añade los tags html. Al final del mismo los añade median innerHTML. No se de que manera podria aligerar la carga de proceso en el cliente, aunque sospecho que esta debe ir asociada (como dices tu) a eventos del usuario mas que a mantener abierto el hilo hasta el final del proceso de obtención/pintado de datos.
De todas formas sigo sin entender porque la carga de imagenes se produce al final del proceso y no cuando se han pintado los 100 primeros resultados como debiera ser, en cuanto a usabilidad, esta claro que esta solución quizas no sea la mejo,r pero ¿porque no me pinta mis botones cuando ha recibido los 100 primeros equipos? independientemente o no que en sucesivas llamadas se sigan pintando equipos de 100 en 100...

Sigo pendiente de sugerencias.

Muchas Gracias.
Saludos

[Dacar010]

Buenas tardes a todos!

Dí con la solución!

El problema estaba en que no controlaba bién el uso de setInterval.
Probe a crear una funcion recursiva haciendo uso de un setTimeout(), se sale de la misma cuando alcanza el número de llamadas que obtengo en el metodo 1.

El resultado es el que yo queria obtener, se carga un listado de equipos en primera instancia de manera rapida y se van trayendo el resto al navegador del cliente en segundo plano sin que el usuario tenga que lanzar evento alguno para que se procese una peticion nueva al servidor, un timer de toda la vida vamos...

De este modo las imagenes se pintan sin ningún problema y el listado va creciendo periódicamente hasta alcanzar la totalidad de registros de la consulta y sin dejar frito el navegador.

Lo único que hay que tener cuidado es con controlar el número de peticiones que se han programado con setTimeOut() ya que si no se han terminado de cargar la totalidad de registros y lanzamos una consulta nueva al buscador las peticiones anteriores se van a mezclar con los resultados nuevos por lo que para ello he creado un array donde guardo todos los identificadores que devuleve setTimeout() e invoco un metodo que lo recorre y lo pasa como parametro a clearTimeout() antes de lanzar las nuevas peticiónes al servidor.

Espero que a alguien le sirva mi respuesta y si se animan a hacer algo parecido y tienen dudas aqui estamos.

Saludos.

[David]

Hola, Dacar010.

Gracias por compartir la experiencia y la forma como solucionaste el problema. Puede que a alguien le resulte útil.

Saludos.