No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Callbacks

7/31
Recursos

Aportes 144

Preguntas 13

Ordenar por:

Los aportes, preguntas y respuestas son vitales para aprender en comunidad. Regístrate o inicia sesión para participar.

Este profe es maquina loco, se le entiende todo!

Funciones Callback
Una funcion callback es una funcion que es pasada como argumento a otra funcion, para ser llamada(called back) en otro momento.
La funcion que recibe como argumento otras funciones es denominada funcion de orden superior (higher-order function), esta contiene la logica correspondiente para ejecutar adecuadamente la funcion callback.

En el siguiente codigo

setTimeout(console.log('Hello'), 1000)

setTimeout es una higher-order function y console.log es una callback function

Tenemos un grupo de aprendizaje para temas relacionados a la Escuela de Javascript: https://chat.whatsapp.com/LsR1Zt77zIV2bUw30fMQ3M

Creo que me hacía falta esta clase para comprender definitivamente los callback y las promise. Como recomendación también sería bueno para complementar que vieran los cursos de Sasha en Fundamentos de JS, y el curso profesional de JS con Richard.

RESUMEN:

En js las funciones son objetos de primera clase, primer nivel, son ciudadanos de primera clase que puedo usarlos como quiera. Pasarlos como parámetro.


//La asincronia se puede generar mediante en setTimeout
console.log('Iniciando proceso...');
function soyAsincrono(elCallback) {
    console.log("Asigno setTimeout para volver asincrona una función como esta misma: \n " + soyAsincrono);
    setTimeout(function(){
    console.log("Pasaron 3 segundos y me ejecuté");
    elCallback();
    }, 3000)
};

soyAsincrono(function(){console.log("Después de esto demuestro que Soy el primer Callback")});


function hola(nombre, miCallback) {
    setTimeout(function () {
        console.log('Hola, '+ nombre);
        miCallback(nombre);
    }, 1500);
}

function adios(nombre, otroCallback) {
    setTimeout(function() {console.log('Adios', nombre); otroCallback();}, 5000);
}


hola('Alejandro', function (nombre) {
    adios(nombre, function() {
        console.log('Terminando proceso...');
    });
});

hola('Alejandro estás probando  "hola" las funciones independientemente, las pasas vacías', function () {});
adios('Alejandro estás probando "adios" las funciones independientemente, las pasas vacías', function () {});

Cuando nosotros realizamos funciones asíncronas no tendremos realmente el control de en que momento se ejecutaran o se mostraran, por eso si queremos que una función asíncrona se muestre en un momento determinado después de que sucediera cierto evento, debemos de llamar o invocar esta función asíncrona dentro de otra función, para esto se usan los callbacks, son parámetros que reciben funciones para que se ejecuten dentro de un evento ya determinado.

es complejo !!! pero se entiende, hay que practicar.
les dejo mi codigo.

Creo que la clave de la clase está en:

Dos funciones que son asíncronas, no se ejecutarían una después de otra, sino se llamaran dentro del Callback de la otra

💚 Me costo entender mucho este tema de callbacks, así que te comparto mis notas profundizando más sobre el tema regresando a lo básico de las funciones. (o′┏▽┓`o)
.

Callbacks

Para entender los callbacks primero hay que regresar a las funciones y entender su sintaxis:

Una función comienza con la palabra reservada “function” seguido del nombre de la función (“saludar” en este caso), después le sigue una lista de parámetros, estos entre paréntesis y separados por una coma en caso de ser mas de uno (“nombre” y “apellido” en este caso).

Nota: Los parámetros son la lista de variables que proponemos cuando se define una función. Mientras que los argumentos son los valores que se pasan a la función cuando ésta es invocada, estos deben coincidir en numero y separados por coma en caso de ser mas de uno con los parámetros propuestos.

// palabra reservada function + nombre de la función + (parámetro(s))
function saludar(nombre, apellido) {
	return "Hola " + nombre + " " + apellido;
}

// invocación de función + (argumento(s))
saludar("Alexander", "Book");

Nota2: la instrucción “return” especifica el valor devuelto por la función, esta puede o no regresar explícitamente los valores de los parámetros de la función.

Una vez comprendeos la sintaxis básica de lo que es una función, podemos entender que callback es una función que se pasa a otra función como un argumento, que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción.

Un ejemplo sencillo de una función callback es el siguiente: comencemos por declarar una función de nombre “ending” que contenga un mensaje, después declaremos una función “starting” que igual contenga un mensaje, pero, esta va a recibir un solo parámetro, el cual llamaremos “callback”, el cual va a recibir nuestra función ending para posteriormente invocarla dentro de sí misma.

function ending() {
	console.log("Terminando proceso... ");
}

function starting(callback) {
	console.log("Hola, soy una función asíncrona callback");
	callback();
}

console.log("Iniciando proceso... ");
starting(ending);

Nota: entiéndase que el parámetro callback actúa como sustituto de nombre para la función ending en este caso.

Ok ahora hagamos algo un poco mas complejo, declaremos una función de saludo y despedida, donde nuestra función de despedida recibirá como parámetro un valor asignado a nuestra función de saludo, tomando en cuenta que al llamar a la función de saludo esta recibirá dos parámetros, un nombre y nuestra función de despedida para hacer el callback.

Respuesta:

// función de despedida
function chao(nameB) {
	console.log("Adios " + nameB);
}

// función de saludo
function hello(nameA, callback) {
	console.log("Hola " + nameA);
	// callback a la función de despedida
	callback(nameA);
}

hello("Carlos", chao);

Nota: Los ejemplos anteriores son ejemplos de callback sincrónica, ya que se ejecuta inmediatamente.

Agregando asincronía:
Una de las funciones más sencillas para agregar asincrónica a nuestros procesos es ejecutar un “timeout”.

Recordemos que un callback consiste en una función que recibe como parámetro otra función, así que podemos incluir la declaración de la función que se recibirá como parámetro en el mismo llamado de nuestra función callback, de manera que:

function soyAsincrona(callback) {
	setTimeout(() => {
		console.log("Estoy siendo asíncrona");
		callback();
	}, 1000);
}

console.log("Iniciando proceso... ");
soyAsincrona(function () {
	console.log("Terminando proceso... ");
});

El hecho de tener nuestros eventos asíncronos puede ser un problema de ves en cuando, por lo que si un evento depende de la ejecución previa de otro, una buena solución seria ejecutarlo dentro del evento dependiente. También nuestras funciones pueden compartir variables a lo largo de la ejecución.

Vi el tema de callback en 3 cursos diferentes y en este lo pude entender perfectamente. Me gustó como lo explicó.

Si quieren profundizar mas pueden seguir este curso Curso de Asincronismo en Javascript

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:

function servirBotana(numPedido) { // No hay tiempo de espera
	console.log('Pedido '+numPedido+': Botana servida');
}

function servirBoteCervezaLigera (numPedido) { // No hay tiempo de espera
	console.log('Pedido '+numPedido+': Bote de cerveza ligera servido');
}

function servirTarroOscuro (numPedido) { // No hay tiempo de espera
	console.log('Pedido '+numPedido+': Tarro de cerveza oscura servido');
}

function prepararMolcajete(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 espera
    console.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.

Callbacks

function hola(nombre, micallback) {
  setTimeout(function() {
    console.log("Hello, " + nombre);
    micallback(nombre);
  }, 1000);
}

function adios(nombre, otrocallback) {
  setTimeout(function() {
    console.log("Adios", nombre);
    otrocallback();
  }, 1000);
}

console.log("Iniciando");
hola("Brando", function(nombre) {
  adios(nombre, function() {
    console.log("Terminando");
  });
});

Recomiendo mucho el curso de V8, se explica muy muy bien la parte de los callbacks

Los callbacks son útiles cuando no sabemos cuanto tiempo va a tardar algo pero cuando termine queremos que pase algo mas

El callback se puede interpretar menos como una función
y mas como la continuación de la función actual, como el .then, como el llamado al siguiente paso

function hola(nombre, param) {
  setTimeout(function() {
    console.log('Hola', nombre)
    param(nombre) //aqui se llama al callback y se manda un parametro
  },1000)
}

console.log('iniciando proceso')

function adios(nombre, param) {
  setTimeout(function() {
    console.log('Adios', nombre)
    param() //aqui se llama al callback
  },1000)
}

//funcion con callback como parametro
hola('Adranuz', function(nombre) {
  adios(nombre, function() {
    console.log('Proceso terminado')
  })
})

ahhhhhhh

Son estos los profesores que uno termina amando Platzi. Que calidad la manera que enseña, se le entiende todooo

Diego de Granda, Carlos Hernandez, Jonathan Alvarez los 3 son una máquinaaa

Hice un pequeño ejemplo para entender mejor esta clase. Creo que con esta clase ya me quedó claro el tema de los callbacks

let person = {
    name: 'Derek',
    lastName: 'Paúl',
    age: 22,
    description: 'description',
}

const extendsTo = (callback, { name, lastName, age }) => {
    setTimeout(function () {
        callback(name, lastName, age);
    },1000);
}

const MyCallback = (nombre, apellido, edad) => {
    console.log(
        `Bienvenido ${nombre} ${apellido}
        Eres mayor de edad, pues tienes: ${edad} años`
    );
}

extendsTo(MyCallback, person);```

Example Calbacks

function hello(name, myCallback) {
  setTimeout(() => {
    console.log("hello", name);
    myCallback();
  }, 1500);
}

function speaks(speaksCallback) {
  setTimeout(() => {
    console.log("bla bla bla...");
    speaksCallback();
  }, 2500);
}

function bye(name, otherCallback) {
  setTimeout(() => {
    console.log("bye", name);
    otherCallback();
  }, 100);
}

console.log("Init process");
hello("George", function () {
  speaks(function () {
    bye("George", function () {
      console.log("End process");
    });
  });
});
function hola(nombre, micallback) {
    console.log('soy una funcion asincrona');    
    setTimeout(() => {
        console.log(`hola ${nombre}`);   
        micallback(); 
    }, 1000);
}

function adios(nombre, otrocallback) {
    setTimeout(() => {
        console.log(`Adios ${nombre}`)
        otrocallback();
    }, 1500);
}


console.log('inicia');
hola('francisco' ,() => {
    adios('Francisco', () => console.log('finaliza'))
    console.log('finaliza proceso mi callback');
} )



8- FUNCIONES CON CALLBACKS PARA LLAMAR A OTRAS FUNCIONES
ADEMAS VEREMOS HERENCIA DE PARAMS

function hola(nombre ,miCallback){
setTimeout( ()=>{
console.log(hola ${nombre})
miCallback(nombre); **1 //lGLOSARIO ABAJO DE TODO
},2000 )
};
function adios(nombre,otroCallback){
setTimeout(()=>{
console.log(“adios”, nombre);
otroCallback();
},1000)
}

console.log(“inicia el programa”);
hola(“tomas”,(nombre)=>{
adios(nombre,()=>{
console.log(“finaliza el programa”)
})
})

TEMINAL:
inicia el programa
hola Tomas
adios Tomas
finaliza el programa
||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
//ES IMPORTANTISIMO ENCADENARLAS,
//QUE EL CALLBACK DE CADA FUNCION SEA LLAMAR A LA SIGUIENTE FUNCION Y ASI SUCESIVAMENTE!

(SI NO LO ENCADENARIAMOS Y HARIAMOS)
hola(nombre, ()=>{} )
adios(nombre, ()=>{} )
SU OUTPUT SERIA
1adios
2hola

GLOSARIO||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
**1 //le enviamos params via callback a las funciones que encadenaremos

Muy buena la clase y felicito al profesor. Por fin me queda claro este tema.

Ufff. Que bien explicado y eso de programadores asíncronos pues es alentador. 😃

No van a creer, pero llevo 4 años haciendo nodejs. Y hasta ahorita entiendo callbacks complejos. Si me preguntan como sobreviví estos años a sido por async/await.

Me explotó la cabeza

Muy bien explicado, ahora solo falta acordarme de la sintaxis

Hola, si te sale un error en nodemon que dice algo como
+FullyQualifiedErrorId : UnauthorizedAcces

debes en windows buscar “Windows PowerShell” y abrir como administrador, luego escribir

Set-ExecutionPolicy Unrestrict

y luego verificar si funciono escribiendo: Get-ExecutionPolicy
deberia salir “Unrestrict”

Este profesor explica demaciado bien, ojala tenga mas cursos

Callback

Un callback es una función que recibe como argumento otra función y la ejecuta. Cuando pasamos un callback solo pasamos la definición de la función y no la ejecutamos en el parámetro. Es la función contenedora la que elige cuándo ejecutar el callback.

como tal la funcion de los callback es que se ejecute una cosa detras de otra en un orden no?
es correcto esto que estoy haciendo?


function contar(callback, callback1, callback2, callback3){
    callback();
    callback1();
    callback2();
    callback3();
}

contar(function(){
    console.log("1")

    }, function(){
       console.log("2")
       }, function(){
          console.log("3")
            }, function(){
                console.log("4")
});



function hola(nombre, miCallback) {
    // La función setTimeout es la forma más sencilla de ser asíncrona
    setTimeout(() => {
        console.log(`Hola, ${nombre}`)
        miCallback(nombre)
    }, 1500)
}

function adios(nombre, otroCallback) {
    setTimeout(() => {
        console.log(`Adiós, ${nombre}`)
        otroCallback()
    }, 1000)
}

console.log(`Iniciando proceso...`)

hola('Carlos',(nombre) => {
    adios(nombre, () => console.log(`Terminando proceso...`))
})
function hola(nombre, miCallback) {
    setTimeout(function () {
        console.log("Hola, " + nombre);
        miCallback(nombre);
    }, 1000)
}

function adios(nombre, otroCallback) {
    setTimeout( function() {
        console.log("Adios",  nombre);
        otroCallback();
    }, 1000);
}

console.log("Iniciando proceso....");
hola( "Carlos", function (nombre) {
    adios(nombre, function() {
        console.log("Terminando proceso....");
    }); 
});

Hey [email protected], he creado un servidor en Discord, para los que se quieran unir. Alli podremos compartir notas de los cursos que estemos haciendo y recursos para profundizar en cada tema. Este es el link: https://discord.gg/bucNSdEQyz, estare dando permisos para crear canales y asi podemos hablar en canales de vos y discutir acerca de lo que querais.

Nunca pares de aprender!

La verdad un muy buen profe, aquí les comparto un articulo para que complemente los estudiado: https://antonioweb.dev/articulo/funcion-callback-javascript-guia-completa

me perdi, es un espaguetti de código eso xD

Callback. gestionar lo que queremos que sea asíncrono

Carlos habia escrito asincorona en vez de asincrona en el primer ejercicio de ejemplo

callback Hell 😄

Es una función utilizada como parámetro en otra función. es parecido a un parámetro común el detalle esta en que un parámetro común puede ser reemplazado por una variable u objeto NO por una función, Callback lo que permite es no solo llamar variables u objetos si no llamar funciones como parámetros dentro de otra función.

Podian analizar este código, llamo las funciones dentro de ellas y no dentro del llamado, esto es asincrono tambien?:

function soyAsincrona(nombre, fn){
    setTimeout(function(){
        console.log('estoy siendo asincrona')
        fn(nombre, adios)
    },1000)
}
function hola(nombre, fn){
    setTimeout(function(){
        console.log(`Hola ${nombre}`)
        fn(nombre, adios)
    },1000)
}
function adios(nombre){
    setTimeout(function(){
        console.log(`Adios ${nombre}`)
        terminar()
    },1000)
}
function terminar(){
    console.log('Termino proceso')
}

hola('fdo', soyAsincrona)```

Mi comprensión del tema

let hola = (name,callback) => {
    setTimeout(() => {
        console.log(`Hola ${name}`);
        callback();
    }, 1000);
}

let adios = (name, callback) => {
    setTimeout(()=>{
        console.log(`adiós ${name}`);
        callback();
    },1000);
}

console.log('Iniciando saludo');
hola('Juan', () =>{
    adios('Juan', () =>{
        
        console.log(`terminando saludo`);
    });

});

callback.js

function hola(nombre, miCallback) {
    setTimeout(function () {
        console.log('hola ', nombre)
        miCallback(nombre);
    }, 1500)
}

function adios(nombre, otroCallback) {
    setTimeout(function () {
        console.log('adios ', nombre)
        otroCallback();
    }, 1000)
}

console.log('iniciano pro')
hola('thony', function (nombre){
    adios(nombre, function (){
        console.log('terminando pro')
    })
});

// hola('thony', function (){})  //mal hecho
//     adios('thony', function (){
//         console.log('terminando pro')
//     })
// ;

Cabe destacar que Los callbacks tienen un comportamiento sincrono por defecto. Aunque este comportamiento se puede modificar/alterar utilizando métodos asíncronos como setTimeOut. setTimeOut, ejecuta una función o evalúa una expresión después de un número específico de milisegundos

Los callbacks es el inicio de todo, Las promesas por detrás utilizan callbacks, y que buena manera lo ha explicado el profesor.

Algo que siento que debe quedar de todo esto es: podemos controlar el orden de ejecución de nuestros callbacks, anidandolos uno detrás del otro, y a su vez, podemos ir compartiendo la información entre ellos

Me gusta mas este curso que el anterior, el otro estuvo mas orientado a express

Genial como explica este profe! :3

la mejor explicación de que carajos es callback,
en cursos anteriores lo mencionan, por fin lo entiendo,
el profe Carlos que otros cursos tiene ???

Un callback es una función que se pasa como parámetro a otra función, para que sea ejecutada dentro de ella.
El callback usualmente utiliza el resultado de la función a donde fue enviada.

function hola(nombre, despedirse) {
    setTimeout(function () {
        console.log('Hola '+ nombre);
        despedirse(nombre);
    }, 1500);
}

function adios(nombre, mensaje_Terminando) {
    setTimeout(function() {
        console.log('Adios ' + nombre);
        mensaje_Terminando();
    }, 1000);
}

function mensaje_Terminando(){
    console.log('Terminando proceso...');
}

function despedirse(nombre) {
    adios(nombre, mensaje_Terminando);
}


console.log('Iniciando proceso...');
hola('Julio', despedirse); 

En el anterior código se ha pasado la función “despedirse” como un callback.

no entendi nada de callback

Carlos es el mejor profe que he tenido en Platzi, es muy bueno explicandoooo

Holaaa,
dejo link de grupo para ayudarnos y sacarnos dudas sobre js: https://chat.whatsapp.com/EbXGamz5GRt9C4dN7NNwYa

como consejo le diria que tomaran otros cursos de JS para entender perfetamente lo que dice el profesor, no saben como ayuda y que satisfaccion da entender mucho las arrow function y el saber lo basico de asincronismo

Más allá del nodemon, o del Live Server que ofrece VSCode, para esta primera parte puede ser útil otro complemento, Quokka.

Os dejo un vídeo donde **Fazt **habla sobre ella.
Quokka.js, Curso Práctico de Quokka.js

Un saludo.

Código final de la Clase

function hola(nombre, miCallback) {
    setTimeout(function () {
        console.log("Hola, " + nombre);
        miCallback(nombre);
    }, 1500);
}

function adios(nombre, otroCallback) {
    setTimeout(function () {
        console.log("Adios, " + nombre);
        otroCallback();
    }, 1000);
}

console.log("Iniciando proceso...");
 hola("Carlos", function () {
     adios("Carlos", function () {
         console.log("Terminando proceso...");
     });
 });

Resumiendo:

  • Una función en JavaScript puede recibir otra función como un argumento.
  • Pasar una funcion como argumento es un concepto de programación poderoso que puede ser usado para notificar de que algo a ocurrido.
  • Dependiendo de si se ejecuto una tarea (tanto si falla o no) podemos contralar el ese flujo.
  • Procura no anidar demasiados callbacks, esto genera algo llamado callback hell que reduce la legibilidad del codigo.

Leer más

Con lo aprendido en el curso, jugueteando un poco con lo aprendido, programe una pequeña historia (muy mala) a punta de callbacks.
Psdt: La historia solo tiene 8 lineas jaja, pero es trabajo honesto.

Codigo 👇

let nombre = "Mauricio";
let tiemposDeEspera = [1500, 2000, 2500];

function linea1(callback1) {
  setTimeout(function () {
    console.log("Hola,", nombre);
    callback1();
  }, tiemposDeEspera[0]);
}

function linea2(callback2) {
  setTimeout(function () {
    console.log("Te contare una historia...");
    callback2();
  }, tiemposDeEspera[0]);
}
function linea3(callback3) {
  setTimeout(function () {
    console.log("ESTATE ATENTO 👀");
    callback3();
  }, tiemposDeEspera[0]);
}
function linea4(callback4) {
  setTimeout(function () {
    console.log("Habia una vez un raton muy feo.");
    callback4();
  }, tiemposDeEspera[1]);
}
function linea5(callback5) {
  setTimeout(function () {
    console.log("Era tan pero tan feo");
    callback5();
  }, tiemposDeEspera[2]);
}
function linea6(callback6) {
  setTimeout(function () {
    console.log("que un día se desperto");
    callback6();
  }, tiemposDeEspera[2]);
}
function linea7(callback7) {
  setTimeout(function () {
    console.log("se vio al espejo");
    callback7();
  }, tiemposDeEspera[2]);
}
function linea8(callback8) {
  setTimeout(function () {
    console.log("y se murio del susto.");
    callback8();
  }, tiemposDeEspera[1]);
}
function linea9(callback9) {
  setTimeout(function () {
    console.log("FIN");
    callback9();
  }, tiemposDeEspera[0]);
}

console.log("Iniciando historia...");
linea1(function () {
  linea2(function () {
    linea3(function () {
      linea4(function () {
        linea5(function () {
          linea6(function () {
            linea7(function () {
              linea8(function () {
                linea9(function () {
                  console.log("Terminando historia...");
                });
              });
            });
          });
        });
      });
    });
  });
});

Alma bendita, entendí asincronía!!! No lo puedo creer

wow magistral!!

Excelente explicación

Callback en pocas palabras es una función la cual es utilizada como parámetro en otra función, Excelente clase 🤯

Un callback (llamada de vuelta) es una función que recibe como argumento otra función y la ejecuta.

function saludo(nombre,callback) {
console.log("Hola "+nombre);
setTimeout(()=>{
callback()
}, 2000)
}

function adios(nombre,otroCallback) {
setTimeout(()=>{
console.log("Adios "+nombre);
otroCallback()
}, 3000)
}

console.log(‘Iniciando proceso…’)
saludo(“Juan”,()=>{
console.log(“Que me cuentas?”)
adios(‘Juan’, ()=>{
console.log(“Cuidate!!!”)
})
})

Qué belleza, con esto entendí mucho sobre JS!!!

Gran explicacion !!! Callback es una función que se pasa a otra función como un argumento, que luego se invoca dentro de la función externa para completar algún tipo de rutina o acción.

Si lo he entendido bien, en la declaración de la función se llama al callback, y en la llamada a la función se declara el callback.

Javascript delega en el navegador ciertas tareas o asocia funciones que deberán ser ejecutadas al ser completadas. Estas funciones se llaman callback, y una vez que el navegador ha regresado con la respuesta, el callback asociado pasa a la cola de tareas para ser ejecutado, una vez que JavaScript haya terminado todas las instrucciones que estan en la pila de ejecución.

¡Explicas demasiado bien!

No entiendo como utilizar nodemon, lo instale pero no se supone que hay que agregarlo al package.json o algo por el estilo para poder acceder a sus funcionalidades? Muchas gracias

🤯

El famoso callback hell… creo que es el tema de la siguiente clase

Anexo mi codigo

function iniciar(Callback1){
    setTimeout(function(){
        console.log("Iniciando proceso");
        Callback1();
    }, 0)
}

function Hola(nombre, Callback2){    
    setTimeout(function(){
        console.log("Hola,",  nombre);
        Callback2();
    },  0);
}

function Adios(nombre, Callback3){
    setTimeout(function(){
        console.log("Adios,", nombre);
        Callback3();
    },  0);
    
}

function finalizar(Callback4){
    setTimeout(function(){
        console.log("Finalizar programa");
    }, 0);
}

iniciar(function(){
    Hola('Pedro', function(){
        Adios('Pedro', function(){
            finalizar(function(){

            })
        })
    })
    
})

Las funciones son elementos de primer nivel
Al ser ciudadanos de primera clase yo puedo utilizarlas de cualquier forma, por ejemplo pasandolas como parametros a eso llamamos callback

Vi los callback en los fundamentos de Js, y ahora otra vez, está vez ya lo tengo super claro.

genail

callback hell C;

callback again !!!

let name = 'Marco';
const hola = (name, myCallback) => {
    setTimeout(() => {
        console.log(`Hola ${name}`);
        myCallback();
    }, 1000);
}

const adios = (name, otherCallback) =>{
    setTimeout(() => {
        console.log(`Adios ${name}`);
        otherCallback();
    }, 1000);
}
console.log('iniciando proceso...');
    hola(name,()=>{
        adios(name, () =>{
            console.log('finalizando proceso...');
        });
});
function hola (nombre,micallback){
    setTimeout(function() {
        console.log("Hola "+nombre)
        micallback(nombre)
    }, 1000);
}
function hablar(callbackHablar) {
    setTimeout(function() {
        console.log("Bla bla bla")
        callbackHablar()
    })
}
function adios(nombre,otrocallback){
    setTimeout(function() {
        console.log("adios "+nombre)
        otrocallback()
    }, 4000);
}
function conversacion (nombre,veces,callback){
    if(veces > 0) {
        hablar(function () {
            conversacion(nombre,--veces,callback)
        })
    } else {
        adios(nombre,callback)
    }
}

console.log("Iniciando el proceso")
hola('Jair',function (nombre){
    conversacion(nombre,10,function(){
        console.log("Proceso terminado")
    })
})```

las funcioones en nodejs son elementos de primera clase

Un mejor nombre para la clase sería “Callbacks e introducción a Asíncronía”

bueno practique un poco y hice unos ejercicios sigamos 😄

super! 😃

callback hell!

super!!!

super!

Usar callbacks

fasinnante clase we :v

con la asincronia podemos decir quien va primero y quien va despues, para tener control de la ejecucion en el codigo

excelente explicación

al fin entendí este concepto!!! que ya había visto en otros 3 cursos de JS pero no me había quedado del todo claro!

gracias profe Carlitos!!!

Por si es interesa hace tiempo redacte algo sobre callback y asincronismo

Callbacks, Promesas y Async/Await, ¡Que alguien me explique!

function hola(nombre, miCallback){			//2- hola se ejecuta despues de 1500 milisegundos. Es una higher-order function
    setTimeout(function () {				//setTimeout es una funcion asincrona
        console.log('Hola ' + nombre)		
        miCallback(nombre)					//3- Llamamos al callback y le pasamos nombre
    }, 1500)
}

function adios(nombre, otroCallback){		//5- adios se ejecuta despues de 1000 milisegundos
    setTimeout(function() {
        console.log('Adios ' + nombre)
        otroCallback()						//6- Llamamos al otro callback
    }, 1000)
}

console.log('Iniciando proceso...')

hola('Mauro', function (nombre) {				//1- Llamamos a hola y le pasamos el nombre y el callback
    adios(nombre, function() {					//4- El callback llama a adios, que recibe un nombre y otro callback
        console.log('Terminando proceso...')	//7- Se ejecuta el otro callback
    })
})

//EN CONSOLA QUEDARIA:
> Iniciando proceso...
> Hola Mauro
> Adios Mauro
> Terminando proceso...

Muy buena explicación, me quedo todo claro!

Tenemos un grupo de Telegram para lo que se quieran unir y debatir dudas y ayudarnos en el proceso.

Grupo: https://t.me/escuelaJavascript

Hay alguna manera de colorear los console.log que aparecen en la consola?

De todos los cursos donde he visto Callbacks este es el primero en el que me queda claro como el agua como funcionan!!!
Muy buen profe y explicación!
Gracias!

El profe leonidas no podria dictar el curso de Profesional de javascript y el curso de React?

se aprende mucho con el profe tiene buena metodlogia el hombre