Controlar ejecución asincrónica con callbacks en Javascript

Question

avanzando con un proyecto me tope con conceptos Sync y Async. Por el cual llevo varias dias tratando de entenderlo y halle todo tipo de referencias pero simplemente no logro comprenderlos, por ese motivo lo posteo.

Haciendo la siguiente referencia. Mostrar números secuencialmente del 1 al 5.

console.log("1");
$.ajax(... respuesta=2; console.log(respuesta); ...);
console.log("3");
$.ajax(... respuesta=4 ...); console.log(respuesta); ...);
console.log("5");

Respuesta obtenida: 1 3 5 4 2

Por los tiempos que lleva procesar la solicitud AJAX no obtengo la secuencia requerida y revisando la Web halle necesario el uso de los callbacks pero al no entender este tipo de programación no veo la forma de aplicarlo a mi código.

function saludar(nombre) {
    console.log("Hola " + nombre)
}
function recibirInvitadoJuan(callback) {
    var invitado = "Juan"
    callback(invitado)
}
recibirInvitadoJuan(saludar) // Hola Juan

Como puedo implementar el uso de los callbacks para respetar la secuencia establecida, desde ya gracias.

Aún no logro obtener un orden secuencial. Haciendo prueba este ejemplo https://es.stackoverflow.com/a/1542/159658 — Antrax Sec, Oct 08 '20 at 17:51
Es que nunca lo obtendrás tratando de correr código asíncrono de forma síncrona. Imagina que cada número devuelto por Ajax viene envuelto en una carcaza que sólo se rompe de cierta altura. Tu propósito es leer el número de una lista que vas encontrando por el camino. El primer número (1) no está envuelto, lo lees, el segundo viene envuelto, lo lanzas al aire muy alto, avanzas, te encuentras el siguiente (3), lo lees, avanzas y encuentras otro envuelto, lo lanzas al aire muy alto, avanzas, encuentras el último número (5), lo lees, luego cae el (4) y luego el (2). Lanzados a diferente altura. — Mauricio Contreras, Oct 08 '20 at 18:08

score 0 · Answer 1 · answered Oct 08 '20 at 18:16

Por partes:

Primero voy a prescindir de jQuery, con lo que las llamadas AJAX las podemos hacer así:

let request = new XMLHttpRequest();
request.onload= function() {
  let respuesta =request.responseText;
  //hacer algo con la respuesta AQUI
}; 
request.open('GET', url);
request.send();

Hagamos una función con esto para simplificar las cosas:

function get(url, callback) {
  let request = new XMLHttpRequest();
  request.onload= function() {
    let respuesta =request.responseText;
    callback(respuesta);
  }; 
  request.open('GET', url);
  request.send();
}

Ahora con esto, el código que quieres sería algo así:

console.log('1');
get(url, function (respuesta) {
  console.log('2', respuesta);
  console.log('3');
  get(url2, function(respuesta2) {
    console.log('4',respuesta2);
    console.log('5');
  });
})

Si te fijas, esto es un poco feo porque tenemos que anidar cada vez que tenemos una llamada AJAX. Te recomiendo aprender sobre las Promesas y fetch, y luego async / await, pero eso queda fuera del alcance de esta pregunta.

Muchas gracias me aclaraste el funcionamiento de callbacks con respecto a mi estructura, veo que las promesas, async / await son los puntos que debere estudiarlos. — Antrax Sec, Oct 08 '20 at 18:26

Controlar ejecución asincrónica con callbacks en Javascript

1 Answers1