Invocar un método después de que se ejecuten otros methods

Tengo una situación en la que estoy tratando de ejecutar un método que eventualmente poblará una vista en UI. Quería ver si alguien puede guiarme correctamente.

Al inicio en jquery llamo algunas funciones como:

function XYX(){ //Do Some stuff basically find some div's on UI and set them //Make a ajax call $.ajax( { }). done(function(data){ //Use the data to set some values on UI }) } function PQR(){ //Do Some stuff basically find some div's on UI and set them //Make a ajax call $.ajax( { }). done(function(data){ //Use the data to set some values on UI }) } 

Ahora lo que sucede es que los resultados devueltos de las dos llamadas ajax son campos de configuration en la interfaz de usuario que eventualmente quiero usar para configurar otra vista que hace nuevamente una llamada ajax y luego utiliza su propio resultado y resultado de XYZ y PQR para establecer algo.

 function FINAL(){ //Do Some stuff basically find some div's on UI and set them //Make a ajax call $.ajax( { }). done(function(data){ //Use the data and fields set by XYZ() and PQR() to set some values on UI }) //Do some other stuff } 

Siendo llamadas AJAX no puedo confiar en que los resultados estén disponibles cuando se llame a la function FINAL y no pueda combinar los tres para generar la vista.

¿Cuál sería la mejor manera de manejar este escenario?

2 Solutions collect form web for “Invocar un método después de que se ejecuten otros methods”

En primer lugar, debe devolver el valor de la promise de sus dos methods:

 function XYX(){ //Make a ajax call - return the Promise return $.ajax( { }). done(function(data){ //Use the data to set some values on UI }) } 

Haz lo mismo con PQR() .

Luego use $.when para realizar una acción cuando ambos hayan finalizado

 $.when(XYX(),PQR()).then(function(){ //both XYX and PQR have completed }); 

Puede usar $.when() para ejecutar el código cuando se completen los tres. Simplemente devuelve la promise creada por $.ajax dentro de cada function

 function one(){ return $.get('one.html').done(function(data){ $('body').append(data); }); } function two(){ return $.get('two.html').done(function(data){ $('body').append(data); }); } function three(){ return $.get('three.html').done(function(data){ $('body').append(data); }); } $(function(){ $.when(one(),two(),three()).done(function(resp1, resp2, resp3){ // do something here when all are done $('body').append('<p>All done</p>') }) }); 

Tenga en count que $.get() es un contenedor para $.ajax y se usa para simplificar la demostración.

Si el order de ejecución de cada uno de los done() dentro de las funciones individuales es importante, puede usar la callback $.when.done() para procesar también los datos de cada request en lugar de hacerlo dentro de cada function.

MANIFESTACIÓN

  • jQuery, TypeError no detectado
  • Entrada de formulario Bootstrap: evitar el envío, pero permitir la comprobación de input
  • get un total de jquery's .each ()
  • Split String array para search y marcar casillas de verificación
  • ¿Cómo probar la latencia de usuario a server en el browser usando javascript?
  • Use jQuery / JS para determinar el DÍA DE LA SEMANA
  • Incluye authentication a $ .getJSON
  • ¿Cómo poner text de desplazamiento en la label del título?
  • ¿Es posible establecer un "reloj" en un elemento HTML de manera que golpee un punto de interrupción del depurador de JavaScript cuando cambie el elemento HTML?
  • Archivo de carga automática jQuery
  • Pegar text de líneas múltiples en text de tipo de input (no en text)
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.