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

  • ¿Cómo puedo animar la opacidad del background de un div?
  • Cómo establecer diferentes posiciones para múltiples elementos con la misma class
  • Problema con la function Mostrar / Ocultar en jQuery. Salta a la parte superior del documento
  • empalmar la fila de la matriz por valor
  • Detecta cuando HTML ha terminado de cargar Y renderizar en la página
  • ¿Ejecutar código solo si la request AJAX toma una cierta cantidad de time?
  • ¿Cuáles son las cosideraciones de performance al crear elementos HTML a partir de JavaScript?
  • Accediendo a `this` en la callback Ajax, todo dentro de un Objeto
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.