0

Necesito que NO se ejecute ninguna función o sentencia hasta que termine de obtener la variable table. He intentando varias formas pero no he logrado configurar adecuadamente una promesa en js.

Estas son las lineas de código.

    var sqlPanel = $('#ResultPanel'); 
    sqlPanel.animate({ opacity: '0.5' }, 200);


    var table = null;

    var promesa = new Promise(
    function (resolve) {

       // Puede tardar varios segundos en obtener la variable table
       table = $('#ResultPanel > div.grid-panel > table').tableToJSON(); 

        resolve();
    }
    );

    promesa.then(
        function () {

            stringJson = JSON.stringify(table);            
            sqlPanel.animate({ opacity: '1.0' }, 200);

        });

Cuando ejecuto javascript no espera hasta que la variable table sea obtenida. Sigue derecho y ejecuta el resto de las lineas. Me gustaría saber como puedo corregir, si hay una mejor opción que no sean promesas o saber que me hace falta. Muchas gracias.

Agrego nuevo código más organizado

function cargar() {
    return new Promise(function (resolve, reject) {
        
        var table = $('#ResultPanel > div.grid-panel > table').tableToJSON()
        resolve(table);
    })
}

function mostrar(table) {
    return new Promise(function (resolve, reject) {

        stringJson = JSON.stringify(table)

        numeroFilas = table.length
        document.getElementById("registros").innerHTML = "Numero de registros selección final: " + numeroFilas + "."
        
        //var sqlProgressIndicator = $('<div></div>', { 'class': 'result-panel loader' })
        //sqlProgressIndicator.remove()

        $("div").remove(".result-panel.loader");

        var sqlPanel = $('#ResultPanel')
        sqlPanel.animate({ opacity: '0.0' }, 1)

        var tableHtml = $("table")
        tableHtml[0].animate({ display: 'block' })
        resolve()
    })
}

function getSelected() {

    var tableHtml = $("table")
    tableHtml[0].animate({ display: 'none' })


    var sqlPanel = $('#ResultPanel')
    sqlPanel.animate({ opacity: '0.5' }, 200)

    var sqlProgressIndicator = $('<div></div>', { 'class': 'result-panel loader' })
    sqlPanel.append(sqlProgressIndicator)

    cargar().then(table => mostrar(table))
}

2 respuestas 2

0

Debes de pasar la variable table en el resolve de esta manera resolve(table), y cuando ejecutas el then debes hacerlo de esta forma:

promise.then(function (table) {
     /* La variable table dentro de este scope no es la misma que tienes declarada arriba de cuando creas una nueva instancia de Promise */
     stringJson = JSON.stringify(table);            
     sqlPanel.animate({ opacity: '1.0' }, 200);
});

Intenta, y me comentas si te funcionó :)

2
  • No lo logre me sirvió por que organice mejor el código, pero no me sirvió creo que la razón es por que la variable table la obtengo de un jquery entonces cuando el llega a esa linea de código, se hace la solicitud a jquery, y avanza sin saber si la variable table ya se obtuvo o no. Igual sigue derecho. Commented el 13 mar. 2019 a las 14:21
  • Debes de poner en un $(document).ready(function(){}) todo el código, o al menos la parte de table, porque de lo contrario table estará vacía siempre, pues carga el javascript pero el DOM no ha llegado a su parte. Commented el 13 mar. 2019 a las 15:30
0

Si vas a trabajar con el DOM mete todo dentro de un evento ready, siempre, porque te arriesgas a no obtener valores, o que sean indeseados.

$(document).ready(function(){
function cargar() {
    return new Promise(function (resolve, reject) {

        var table = $('#ResultPanel > div.grid-panel > table').tableToJSON()
        resolve(table);
    })
}

function mostrar(table) {
    return new Promise(function (resolve, reject) {

        stringJson = JSON.stringify(table)

        numeroFilas = table.length
        document.getElementById("registros").innerHTML = "Numero de registros selección final: " + numeroFilas + "."

        //var sqlProgressIndicator = $('<div></div>', { 'class': 'result-panel loader' })
        //sqlProgressIndicator.remove()

        $("div").remove(".result-panel.loader");

        var sqlPanel = $('#ResultPanel')
        sqlPanel.animate({ opacity: '0.0' }, 1)

        var tableHtml = $("table")
        tableHtml[0].animate({ display: 'block' })
        resolve()
    })
}

function getSelected() {

    var tableHtml = $("table")
    tableHtml[0].animate({ display: 'none' })


    var sqlPanel = $('#ResultPanel')
    sqlPanel.animate({ opacity: '0.5' }, 200)

    var sqlProgressIndicator = $('<div></div>', { 'class': 'result-panel loader' })
    sqlPanel.append(sqlProgressIndicator)

    cargar().then(table => mostrar(table))
}
});

$(document).ready(function(){}) lo que hace es ejecutar el código que contiene una vez el DOM ha terminado de cargar. En este caso no solo el DOM si no que es el documento entero, lo que se muestra en pantalla. Échale un ojo y me dices.

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.