1

Hace poco que empece a desarrollar una aplicación web y me tope con el siguiente problema:

var template = {};
template = (function () {

var ROWS = -1;
var COLS = -1;

var _set = function (position) {
    jQuery.ajax({
        type: "GET",
        url: pathservicehost + '/posiciones/' + position,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data, status, jqXHR) {
            ROWS = data.TotalFila;
            COLS = data.TotalColumna;
        },
        error: function (jqXHR, status) {
        }
    });

    if (PARAMETERS != null && ROWS > 0 && COLS > 0)
        _create(container);
};

var _create = function (container) {
    //Crea una tabla y lo coloca en 'container' usando las variables  globales ROWS y COLS
};

var _init = function (container, position) {
    _set(position);
    _create(container);
};

return {
    init: _init
}
})();

El problema que tengo es que cuando invoco a la función init, la función _create se ejecuta antes que _set y dado que los valores de las variables COLS y ROWS no se han inicializado aún, el programa me lanza una excepción.

Quisiera que por favor alguien me oriente acerca de como podría resolver dicho problema, gracias.

2 respuestas 2

2

El problema que tengo es que cuando invoco a la función init, la función _create se ejecuta antes que _set y dado que los valores de las variables COLS y ROWS no se han inicializado aún, el programa me lanza una excepción.

En realidad, _set se ejecuta primero, pero no olvides que JavaScript es monotarea y asincronico para todas las operaciones de Entrada/Salida, y dentro de _set estas haciendo una solicitud ajax.

Como una solicitud Ajax es una solicitud de entrada/salida no puedes llamar _create consecutivamente al método _set, debes hacerlo cuando termina la operación, es decir, en el "callback" que le pasas a jQuery... pues sera invocado cuando los datos sean recibidos.

En el código, invoca a _create dentro del callback de success: (mas comentarios en el código)

// a set le pasas el container pues lo necesitaras cunado invoques _create
var _set = function (container, position) {
    jQuery.ajax({
      // resto del codigo
      success: function (data, status, jqXHR) {
        ROWS = data.TotalFila;
        COLS = data.TotalColumna;

        // aquí invocas a _create, cuando ya tienes los datos.
        _create(container);
      },
      // resto del codigo
}

Luego cuando invocas _set

var _init = function (container, position) {
    _set(container, position);
};

Ojo! fíjate que en _set, agregue el orden de las variables para que tenga consistencia el código.

La parte que sigue la puedes borrar sin dudarlo, pues en ese punto tampoco llego la respuesta del servidor

if (PARAMETERS != null && ROWS > 0 && COLS > 0)
        _create(container);

Finalmente para simplificar las cosas puedes eliminar el método _init y renombrar _set como _init, ya que lo único que hace es invocar a _set

De los comentarios

Si tienes que hacer varias solicitudes y coordinarlas, te recomiendo que aprendas Promesas (en inglés Promises). Aquí te dejo un enlace que trata de las diferencias entre callbacks y Promises:

Diferencias entre AJAX anidadas y promises

5
  • muchas gracias por tu respuesta y los consejos me resultaron bastante logicos y me dieron un mejor entendimiento de mi problema. Lo que me gustaria saber es que sucederia si en la funcion _set tuviese a mas llamadas al servidor (es decir consuma no solo un servicio sino varios) todas ellas necesarias para inicializar variables que posteriormente utilizare en la funcion _create el 23 mar. 2016 a las 21:52
  • @alexanderzevallos en ese caso, tendrás que hacer la segunda solicitud cuando termina la primera, o usar promises (lo cual te recomiendo aprendas) para coordinar todas las solicitudes. No hay forma de que puedas hacerlo como en lenguajes que se "bloquean" cuando lees un archivo o un recurso de la red. Debes siempre usar callbacks, es la ley de javascript. el 23 mar. 2016 a las 21:55
  • @alexanderzevallos fijate que deje un link en la respuesta sobre promises. el 23 mar. 2016 a las 21:59
  • Gracias por los consejos nuevamente @rnd ... hay demasiadas cosas que aun me faltan por aprender. Tomare en cuenta tu consejo acerca de promises. el 23 mar. 2016 a las 22:00
  • @alexanderzevallos de nada! intentando se aprende! suerte!, por cierto no puedes marcar ambas respuestas como correctas, debes elejir una, es la ley de SO.. jaja.! suerte! el 23 mar. 2016 a las 22:01
1

Creo que es porque la función _set es asíncrona. Primero hace un pedido al servidor, y cuando vuelven los datos se ejecuta lo que hay adentro del .success. (Esta devolución desde estar tardando un poco y por eso se ejecuta el _create sin esperar la respuesta del _set)

En mi caso, uso dos formas para solucionar esto, invoco al _create adentro del .success o utilizo un callback.

Podés agregar el callback con algo como esto:

var template = {};
template = (function () {

var ROWS = -1;
var COLS = -1;

var _set = function (position, callback) {
    jQuery.ajax({
        type: "GET",
        url: pathservicehost + '/posiciones/' + position,
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data, status, jqXHR) {
            ROWS = data.TotalFila;
            COLS = data.TotalColumna;

            callback();
        },
        error: function (jqXHR, status) {
        }
    });

    if (PARAMETERS != null && ROWS > 0 && COLS > 0)
        _create(container);
};

var _create = function (container) {
    //Crea una tabla y lo coloca en 'container' usando las variables  globales ROWS y COLS
};

var _init = function (container, position) {
    _set(position, function(){
            _create(container);
        });

};

return {
    init: _init
}
})();
1
  • Gracias por tu respuesta @KN_ ... voy a gastar algunas horas leyendo más acerca de los callbacks. el 23 mar. 2016 a las 21:59

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.