Ejemplo cotidiano para entender la asincronía con callbacks

El asincronismo como ejemplo de la vida cotidiana:

Vas a un restaurant bar un viernes en la tarde después de una semana de agotamiento laboral, tienes hambre y mucha sed, así que realizas el siguiente pedido al mesero:

1. Un molcajete cielo, mar y tierra para comer.
2. Un tarro de cerveza oscura extra fría, al mismo tiempo que te sirvan el molcajete.

Pero, mientras esperas el platillo fuerte pides:

1. Una botana
2. Una cerveza de bote ligera
   El mesero te sirve la botana y el bote de inmediato

Resulta que hay demasiada gente en el restaurante, ya pasaron 10 minutos, te acabaste la botana y la cerveza ligera, y como aún no te sirven el molcajete, le hablas al mesero y le pides:

1. Otra botana
2. Otro bote de cerveza ligera

El mesero te vuelve a servir la botana y el bote de inmediato

Ya pasaron 20 minutos y estás a punto de cancelar el pedido inicial cuando de pronto te llega tu molcajete y tu tarro de cerveza oscura extra fría.

¡A COMER Y TOMAR QUE EL MUNDO SE VA A ACABAR!

Ahora veamos esto en código:

functionservirBotana(numPedido) { // No hay tiempo de esperaconsole.log('Pedido '+numPedido+': Botana servida');
}

functionservirBoteCervezaLigera (numPedido) { // No hay tiempo de esperaconsole.log('Pedido '+numPedido+': Bote de cerveza ligera servido');
}

functionservirTarroOscuro (numPedido) { // No hay tiempo de esperaconsole.log('Pedido '+numPedido+': Tarro de cerveza oscura servido');
}

functionprepararMolcajete(numPedido, callback) { // Tiempo de espera de 20Mins
	setTimeout(function () {
        callback(numPedido);
    }, 6000); // Utilizamos 6 segundos que representan 20 minutos porque no manches xD
}

let numPedido = 1;
console.log('*** Pedido 1 realizado, lo están preparando ....');
prepararMolcajete(numPedido, function (numPedido) {
	console.log('Pedido '+numPedido+': Molcajete servido');
	servirTarroOscuro(numPedido);
    console.log('* Pedido 1 servido');
});

numPedido = 2;
console.log('* Pedido 2 realizado');
servirBotana(numPedido);
servirBoteCervezaLigera(numPedido);
console.log('* Pedido 2 servido');

numPedido = 3;
setTimeout(function () { // Después de 10 minutos de esperaconsole.log('* Pedido 3 realizado');
	servirBotana(numPedido);
	servirBoteCervezaLigera(numPedido);
	console.log('* Pedido 3 servido');
}, 3000); // Utilizamos 3 segundos que representan 10 minutos porque no manches xD

Puntos importantes en este ejemplo:

• Las funciones que no representan tardanza (APIS externas), se ejecutan de inmediato.
• Una vez que se definen los criterios por los cuales el callback será ejecutado, por ejemplo al pasar el tiempo definido por el setTimeout, o al recibir la respuesta del XMLHTTPREQUEST, o al cumplirse el intervalo de setInterval, dicho callback pasa al queue esperando que las funciones regulares (normales, nativas, del core, etc) del callstack se ejecuten por completo.
• Mientras se espera que se cumplan los criterios de dichas funciones asíncronas, se pueden seguir ejecutando otras funciones, incluyendo funciones asíncronas que representen una tardanza menor, como en el caso del 3er pedido de este ejemplo, que se realiza a la mitad de la espera del pedido 1.
• Una vez que el callstack está vacío, el eventloop pasa dicho callback al callstack para que éste sea ejecutado de inmediato.

En este ejemplo sólo se considera el uso de los callbacks, pues es una tema que se complica mucho más que el uso de promesas y fetch. Espero les sirva el aporte.