funcion con precallback y postcallback

[killerangel]

Hola....

otra vez por aca.

tengo una funcion con la q cargo por medio de ajax una web, esta funcion entre sus parametros tiene precallback y post callback que son dos funciones que se mandan como parametros y q son evaluadas para modificar algunos contenidos necesito algo asi:

Código:

function mifuncion(param,precallback,precallback){
 [sentencias0]...
 //si existe precallback se ejecuta: 
 if(precallback){precallback()}
 [sentencias1]...
 //si existe postcallback se ejecuta: 
 if(postcallback ){postcallback ()}
 [sentencias2]...
}

//va algo asi

mifuncion('nombre',function(){var x=1},function(){var y=2)})

el problema es q mientras se ejecuta precallback pareciera q en paralelo se ejecutan las [sentencias2] y lo q necesito es que si se ejecuta precallback no se haga nada hasta terminar

basicamente es q no se pase a otra linea mientras no se termine de ejecutar una funcion.

gracias!!

[Panino5001]

Habría que ver cómo estás usando eso. Para evitar esos problemas conviene llamar a todas las funciones cuando onreadystatechange==4, de esa manera todo se ejecuta línea a línea y sale como esperás. La alternativa puede ser compleja: colocar variables que cambien cuando las funciones se terminen de ejecutar, verificar con setInterval si esas variables cambiaron y recién ahí ejecutar el resto.

[killerangel]

veo veo... parece q la cosa no esta muy facil.... tendre q cambiar la forma y fondo del asunto.

gracias

[killerangel]

Aver me exlico mejor:

estoy cargando una web con ajax en un div oculto;

la primera funcion me sirve por si es q antes de mostrar el resultado le hago unos ajustes.
si se hace o no los ajustes dependiendo del caso con la funcion precallback y despues de eto se continua con otras sentencias.... ya despues se muestra el contenido y si hay un callback biene al final en esta parte

masomenos me dejo entender??

[venkman]

Tal como está el código que has puesto, ocurre como esperas. El código se ejecuta secuencialmente. Hasta que no termine precallback() no se ejecuta la siguiente sentencia.

Código javascript:

var flag = 0;
function mifuncion(param,hook){
    alert("[1]: " + flag);
    flag = param;
    alert("[2]: " + flag);
    if (hook) { hook(); }
    alert("[3]: " + flag);
    flag = param;
    alert("[4]: " + flag);
}
mifuncion(3, function() { alert("[a]: " + flag); flag = 7; alert("[b]: " + flag);});
 

El resultado de los alerts es:
[1]: 0
[2]: 3
[a]: 3
[b]: 7
[3]: 7
[4]: 3
Es decir, en el orden correcto que cabía esperar.


De todos modos, con la llamada de ejemplo que has puesto, no hay ningún efecto secundario en las funciones que pasas como precallback y postcallback, así que en realidad no se ve el orden de ningún modo. Repito: con ese ejemplo.



Otra cosa distinta es que en las funciones que pasas como precallback y postcallback haya otro tipo de llamadas. Si, lo que tienes en ellas, por ejemplo son llamadas asíncronas con XHR o setTimeouts o algo similar, entonces a eso no se esperará que finalice (por definición). Pero ojo, a eso. Porque en realidad la llamada a precallback() sí que finalizará y se continuará en orden.

Quizá sería más conveniente que pusieras el código real para que podamos ver dónde está el problema.

[Panino5001]

A mi por lo menos no me queda muy claro, pero quizá te sirva este ejemplo para ver cómo disparar un callBack que contemple la respuesta ajax (aunque no sea exactamente lo que creo que necesites, puede darte alguna idea): http://www.forosdelweb.com/2542022-post7.html
Edito: Postée antes que venkman (hola!)

[killerangel]

PLUGIN JQUERY Q HACE PARA CARGAR CON EFECTO:(... o al menos eso trato de hacer :( ...)

1º el div original se desvanece y aparece tabla del mismo tamaño con una imagen de loading y un boton de 'Detener Carga'

2º una vez terminada la carga (q hago en un div oculto), efectua el precallback... por ejemplo si he cargado json y kiero manejar el resultado antes de mostrarlo.

3º redimensiono el div al tamaño del divo oculto, lo hago aparecer y elimino el actual y para q nadie sepa q paso le paso el id del div anterior al nuevo div

4º si hay un callback se efectua al final....

lo q esta como ofset y su metodo H es solo para calcular la altura del div oculto

Código javascript:

jQuery.fn.cp = function(url,data,precall,postcall){
    this.each( function(){
        if($(this).attr("title")=="x"){
            return;
        }
        $(this).attr("title","x");
        var im='<center><img id="il'+this.id+'" src="../images/loading.gif" alt="cargando" \/><br \/>'+
        '<br \/><input type="button" value="Detener" id="btn'+this.id+'"\/><\/center>';
        $(this).fadeOut("fast",function(){
            var h=new ofset(); h=h.H(this.id);
            $(this).html('<table width="100%" border="0" height="'+h+'" id="ttt"><tr><td valign="middle" id="td'+this.id+'">'+im+'<\/td><\/tr><\/table>');
            $(this).show();
            var conte=this;
            $(this).before('<div id="d_aux'+this.id+'" style="display:none" ><\/div>');
            $("#btn"+this.id).click(function(){
                res.abort();
                $(this).before("<span class='alerta'>Carga Detenida<\/span>");
                $("#"+this.id+",#il"+conte.id+",#d_aux"+conte.id).remove();
                $(conte).removeAttr("title");
                return false;
            })
            var res=$.ajax({
                type: "POST",
                cache: false,
                async: false,
                url: url,
                data: data,
            }).responseText;
            if(precall){res=precall(res);}
            $("#d_aux"+this.id).html(res);
            var h=new ofset(); h=h.H("d_aux"+this.id);
            $("#td"+this.id).empty();
            $(this).animate({height:h},"normal",function(){
                $("#d_aux"+conte.id).fadeIn("fast");
                $(this).remove();
                $("#d_aux"+conte.id).attr("id",conte.id);
                $(this).removeAttr("title")
                if(postcall){postcall()}
            });
        });
    });
}
 

[killerangel]

masomenos funciona asi:

Código:

$("#mi_div").cp("lista_usuarios.php",{pais:1},
	function(res){
		//hago una tabla con los datos q he obtenido por json q es la respuesta de la web q cargo
		//y obiamente retorno la tabla lista...
		//... sentencias ...
	},
	function(){
		//esto para rellenar a q se nota el post callback
		alert('tarea terminada :) ')
	alert
	}
)

[venkman]

Esa llamada síncrona que tienes ahí (res)... ¿Estás probando esto con Firefox?

[killerangel]

sip solo uso ff

me acabo de percatar q con ie no corre :(

[venkman]

Bueno, ahora me voy ya a dormir, pero... ahora mismo lo que se me ocurre es que deberías evitar completamente el uso de esa llamada síncrona y hacerla asíncrona.

[venkman]

Bueno... He estado mirando el código con más detalle y se me ha ocurrido alguna cosa más.

Claramente hay que eliminar la llamada síncrona como sea. Además, ¿has probado lo de cancelar? ¿Funciona bien?
Lo digo porque puede que funcione, pero es un comportamiento en el que no deberías confiar. Si la petición es síncrona, el código se debe parar ahí hasta que se recibe la respuesta. Aunque se genere por otro lado el evento que mande el abort(), el navegador no tiene un modo limpio de terminar la petición y continuar la ejecución del código, pero tampoco tiene un modo limpio de parar la ejecución del resto del código. Con una petición asíncrona, basta eliminar la petición. Se desconecta, no llega respuesta, nunca salta el evento readystatechange (*) y no hay ningún problema.

(*) En realidad sí salta, porque se resetea a 0. Pero bueno, ese ya es otro asunto.

Bueno, a lo que iba. Creo que habría que hacer algo más o menos así:

Código javascript:

jQuery.fn.cp = function(url,data,precall,postcall){
    this.each( function(){
        if($(this).attr("title")=="x"){
            return;
        }
        $(this).attr("title","x");
        var im='<center><img id="il'+this.id+'" src="../images/loading.gif" alt="cargando" \/><br \/>'+
                    '<br \/><input type="button" value="Detener" id="btn'+this.id+'"\/><\/center>';
        $(this).fadeOut("fast",function(){
            var h=new ofset(); h=h.H(this.id);
            $(this).html('<table width="100%" border="0" height="'+h+'" id="ttt"><tr><td valign="middle" id="td'+this.id+'">'+im+'<\/td><\/tr><\/table>');
            $(this).show();
            var conte=this;
            $(this).before('<div id="d_aux'+this.id+'" style="display:none" ><\/div>');
            var res;
            $("#btn"+this.id).click(function(){
                res.onreadystatechange = function() {};
                res.abort();
                $(this).before("<span class='alerta'>Carga Detenida<\/span>");
                $("#"+this.id+",#il"+conte.id+",#d_aux"+conte.id).remove();
                $(conte).removeAttr("title");
                return false;
            });
            res=$.ajax({
                type: "POST",
                cache: false,
                async: true,
                url: url,
                data: data,
                success: function(res) {
                    if(precall){res=precall(res);}
                    $("#d_aux"+this.id).html(res);
                    var h=new ofset(); h=h.H("d_aux"+this.id);
                    $("#td"+this.id).empty();
                    $(this).animate({height:h},"normal",function(){
                        $("#d_aux"+conte.id).fadeIn("fast");
                        $(this).remove();
                        $("#d_aux"+conte.id).attr("id",conte.id);
                        $(this).removeAttr("title")
                        if(postcall){postcall()}
                    });
                }
            });
        });
    });
}
 

Lo he puesto un poco deprisa y habría que revisarlo y probarlo, claro. Miralo tú un poco por esta parte, ok?

Ah, otra cosa... los nombre "precallback" y "postcallback" a mi personalmente no me quedan muy claros porque en realidad se llaman los dos después de la petición XHR, ¿no? Quizá sería mejor ponerles nombres como... "processDataCallback" y... no sé, "finalizeCallback" o alguna cosa similar.