JQuery, AjaxStop y sus problemas
Escrito el 24 octubre 2012 por Luis Ignacio Díaz Martínez
Tabla de contenidos
La verdad, es que no se bien que título tendría que tener este artículo… es algo difícil de explicar, pero por desgracia me he topado muchas veces con ello.
JQuery es una maravilla de freamwork y con el cual he aprendido muchísimo… no obstante no es perfecto, y el desarrollador tiene que saber cuando utilizarlo y sobretodo no abusar de el. 
Sencillamente si algo puede realizarlo Javascript en su estado puro no compliquemos más intentando adaptarlo a JQuery malgastando así tiempo y esfuerzo.
A día de hoy necesito de JQuery muchísimo, me facilita mucho la comunicación con el servidor ( AJAX ) y a la vez el modelaje de la interface… no obstante, los lenguajes de programación orientados a web son muy modulares y no hay una línea de programación estricta a seguir cuando desarrollamos una aplicación, esto implica que podemos encontrar variedad de ejemplos estructurados y programados de formas totalmente distintas.
Mi forma de programar en este tipo de lenguajes es muy modular, reaprovechando siempre código e intentando pensar en la optimización y seguridad así como evitar cargas o llamadas innecesarias tanto del lado del cliente como del servidor.
Llevo ya tiempo moldeando una estructura básica en la cual baso todas mis aplicaciones ( organización de directorios, nomenclatura de ficheros, … ) y soy consciente que aún le queda mucho.
Mi problema, básicamente se centra en una rutina que suelo utilizar mucho que a continuación explicaré.
Entorno
Va ha ser difícil explicar siendo un entorno de programación pero intentaré hacerlo…
Estamos utilizando JQuery. Queremos cargar una lista <ul> en un div que se genera por medio de $.each ( bucle de JQuery ), pero el div donde lo queremos cargar aun no existe y por lo tanto utilizamos ajaxStop ( de JQuery ).
Y lo que queremos es que cuando el div se cree la lista se añada ( que ya se habrá generado previamente en un objeto ).
Problema
Si nosotros asociamos la función AjaxStop al div ( para que cuando termine de crearse ejecute otra acción ) esta será lanzada siempre que haya una acción relacionada al div como por ejemplo un evento ( click, mouseover ) o añadir una lista nueva dentro.
Esto quiere decir que todo lo que ejecutemos dentro de AjaxStop se repetirá una y otra vez… y si claro, la acción que se repite es añadir una lista ( <ul> ) estaríamos constantemente añadiéndolas.
Solución
No es que me apasione mucho la forma que he tenido de solucionar este problema… pero en mi caso no he encontrado otra.
Resulta, que en JQuery tenemos el método unbind. Sencillamente este método elimina los eventos que están asociados a ese elemento, así que eliminaría la acción que asocia AjaxStop. El problema… es que elimina todos los eventos.
Ejemplo
Lo podemos ver mejor con el ejemplo de mi propio código:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
$.each(obj_listarCarpetas,function(i,v){ //->Comprobamos datos if(typeof(obj_recopilaData[v])=='undefined'){ recopilaData(v); } //->Maquetamos la lista m+="<div id='"+v+"'></div>"; }); $(".content").append(m); //->Comenzamos con los datos $(".content").ajaxStop(function(){ var n=""; $.each(obj_recopilaData,function(j,w){ if(w.status!=0){ n="<img src='"+w.thumb+"'/>" n+="<ul>"; n+="<li class='title'>"+w.title+"</li>"; n+="<li class='date'>"+w.date+"</li>"; n+="<li class='desc'>"+w.desc+"</li>"; n+="</ul>"; $("#"+w.album).append(n); }else{ $("#"+w.album).remove(); //-> Codigo de err eliminamos! } }); //->Desenlazamos los eventos (ajaxStop)! $(".content").unbind(); }); |
Podemos ver como $(«.content»).unbind() se sitúa al final de la función ajaxStop.
Enlaces
Dejo los enlaces ha las funciones implicadas en este artículo:
Cargando... Freamwork • JQuery • Programación
Me llamo 