0

actualmente quiero establecer un orden de ejecución de funciones js.

La primera función a realizarse es:

function TotalInstituciones(){
   var deferred = $.Deferred();

   $.ajax({
      data:'action=TotalInstituciones',
      url: urlDes,
      type:'POST',
      dataType:'JSON'
   }).done(function(resp){
      if(resp.length != 0){
         sessionStorage.TotalInst = resp[0].Total;
         console.log("a");
      }else{
         sessionStorage.TotalInst = 0;
      }

      return deferred.promise();

   });
}

Como se puede ver tengo algo de deferred y promise, pero que al ver que no funciona debe ser por mal uso de mi parte.

La segunda función:

function PaginadorInstituciones(){
    var Numero_Total = parseInt(sessionStorage.TotalIns);
    console.log("b");
}

Esta función genera una paginacion....

Al cargarse la pestaña tengo lo siguiente:

$.when(TotalInstituciones()).then(PaginadorInstituciones());

Pero como respuesta en la consola tengo:

b
a

Lo que espero llegar a hacer es que se ejecute primero TotalInstituciones() y cuando esta termine se ejecute PaginadorInstituciones(), si es factible para quien sepa la respuesta que pueda explicar el pq de su solución.

Gracias de antemano.

2
  • 1
    Hola, la solución mas simple podría ser llamar la función PaginadorInstituciones() dentro del done(function(resp){ debajo de console.log("a");. Commented el 30 jul. 2019 a las 16:27
  • 1
    de hecho esta mal tu callback ,es asi $.when(TotalInstituciones()).then(PaginadorInstituciones); como lo tienes estas ejecutando la funcion Commented el 30 jul. 2019 a las 17:52

1 respuesta 1

0

En realidad el código está CASI bien, solo le faltaría el parámetro de ajax "async: false", para que la peticion no se realice de manera asíncrona, que es la razón por la que se obtiene después.

Digamos que funciona como el "defer y async" para los script en el HTML. Esto define el tiempo de ejecución y finalización, en función si se requieren cargar los recursos por necesidad o tiempo de ejecución.

Se puede entender que lo mejor es "async", de tal forma no obligamos al código a finalizar en un determinado momento, sino que seguirá su flujo y dependerá de la NECESIDAD de ese código para darle prioridad, esto optimiza la carga del navegador.

Te dejo un enlace sobre el tema ya que igual no soy tan diestro en explicarlo :P

https://cybmeta.com/diferencia-async-y-defer

Ahora, sobre tu pregunta, la solución va de agregar una pequeña configuración en la petición ajax. Es cierto que el manejo de las promesas puede llegar a ser algo mas o menos duro de trabajar si no se tiene mucha soltura (me incluyo). Así pues tu pregunta me ha servido para documentarme, leer y aprender mas al respecto.

He probado el código y funciona.

async: false 

Llamada SINCRONA

function TotalInstituciones(){
    var deferred = $.Deferred();
    $.ajax({
        data:'action=TotalInstituciones',
        url: 'https://jsonplaceholder.typicode.com/photos',
        type:'POST',
        dataType:'JSON',
        async: false
    }).done(function(resp){
        if(resp.length !== 0){
            console.log("a");
        }else{
            sessionStorage.TotalInst = 0;
        }
    });
    return deferred.promise();
}

function PaginadorInstituciones(){
    console.log("b");
}

$.when(TotalInstituciones()).then(PaginadorInstituciones());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
    <meta content='text/html;charset=UTF-8'>
    <title>Example</title>
</head>
<body>

</body>
</html>

Llamada ASÍNCRONA

function TotalInstituciones(){
    var deferred = $.Deferred();
    $.ajax({
        data:'action=TotalInstituciones',
        url: 'https://jsonplaceholder.typicode.com/photos',
        type:'POST',
        dataType:'JSON'
    }).done(function(resp){
        if(resp.length !== 0){
            console.log("a");
        }else{
            sessionStorage.TotalInst = 0;
        }
    });
    return deferred.promise();
}

function PaginadorInstituciones(){
    console.log("b");
}

$.when(TotalInstituciones()).then(PaginadorInstituciones());
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<html>
<head>
    <meta content='text/html;charset=UTF-8'>
    <title>Example</title>
</head>
<body>

</body>
</html>

La petición SINCRONA espera a finalizar la petición por completo y obtener los datos.

De manera aśincrona, en cuanto se realiza la petición, los datos se siguen cargando, pero como no los estás requiriendo o usando, javascript permite continuar la carga y por eso se te adelantaba la letra b.

Te dejo los enlaces que he estado leyendo sobre las promesas, creo que son interesantes

Referencia 1

Referencia 2

Referencia 3

Referencia 4

Referencia 5

Referencia 6

En todos hay explicaciones de distintos puntos de vista y bastante extensas junto a ejemplos sobre formas de trabajar promesas, callbacks, tiempos de ejecución de javascript etc.

Espero que te ayude :)

Saludos!

2
  • Te pasaste, muchas gracias por la respuesta y la solución, mil gracias. Commented el 30 jul. 2019 a las 18:30
  • jeje, como comentaba, yo había trabajado algo pero poco, y estaba mas o menos verde. Me puse..y oye, pues yo también aprendo ;). No hay de que, un saludo!
    – user42165
    Commented el 30 jul. 2019 a las 18:32

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.