No tienes acceso a esta clase

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

Callback Hell: refactorizar o sufrir

8/31
Recursos

Aportes 129

Preguntas 10

Ordenar por:

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

Enseguida me recorde de esta pelicula @codingcarlos
This is Node.js!!!

RESUMEN:


Los callback Hell se dan cuando empiezo a pasar una función como parámetro que a su vez llama a otra función como parámetro, y así hasta n.
Una estrategia para trabajar con estas estructuras lógicas tan monolíticas es usar estructuras de control y funciones recursivas.

Las funciones recursivas se llaman así mismas y mediante la estructura de control le digo cuantas veces voy a necesitar llamar la función así misma.

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

function hablar(callbackHablar) {
    setTimeout(function() {
        console.log('Bla bla bla bla...');
        callbackHablar();
    }, 1000);
}

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

//En esta parte del código uso funciones recursivas porque estoy llamando a conversacion dentro de si misma. y mediante un If como estructura de control le digo que cantidad de veces va a  ejectuarse la funcion hablar.
function conversacion(nombre, veces, callback) {
    if (veces > 0) {
        hablar(function () {
            conversacion(nombre, --veces, callback);
        })
    } else {
        adios(nombre, callback);
    }
}

// --

console.log('Iniciando proceso...');
hola('Aleajandro-sin', function (nombre) {
    conversacion(nombre, 10, function() {
        console.log('Proceso terminado');
    });
});

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

Antes pensaba que la única manera de evitar el Callback Hell era usando promesas. Aquí aprendí que hay otras soluciones más elegantes. 🤓

les comparto una bonita manera para aprender a manejar usando callback hell 😂😂😂😂😂

function inicio(callback){
    setTimeout(function(){
        console.log("1.-Abrir la puerta del auto")
        callback();
    },1000);

}


function entar(call){
    setTimeout(() => {
        console.log("2.-Entrando al auto");
        call()
    }, 1000);
}

function cerrar(coll){
    setTimeout(() => {
        console.log("3.-Cerrar la puerta del auto");
        coll();
    }, 1000);
}

function encender(callba){
    setTimeout(() => {
        console.log("4.-Encender auto");
        callba();
    }, 1000);
}

function cinturon(callbackx){
    setTimeout(() => {
        console.log("5.-Ponerse cinturon de seguridad");
        callbackx();
    }, 1000);
}

function avanzar(callbackq){
    setTimeout(() => {
        console.log("6.-Poner en marcha el auto.....");
        callbackq();
    }, 1000);
}

function finalizado(){
    setTimeout(() => {
        console.log("7.-Proceso termindao con exito ahora usated sabra lo que ara con el auto que la fuerza lo acompañe :) ")
    }, 1000);
}

inicio(function(){
    entar(function(){
        cerrar(function(){
            encender(function(){
                cinturon(function(){
                    avanzar(function(){
                        finalizado()

                    })
                })
            })
        })
    })
})




Mi duda aquí es: para que molestarse en seguir explicando los callbacks o métodos de hacerlo mas legible si ya existen las promesas.
Según el curso de Asincronismo en Js; una buena practica es usar callbacks que contenga máximo 3 anidaciones.
Es muy común usar callbacks extensos en Proyectos?

Callback Hell: refactorizar o sufrir

function hola(nombre, micallback) {
  setTimeout(function() {
    console.log("Hello, " + nombre);
    micallback(nombre);
  }, 1000);
}
function hablar(callbackhablar) {
  setTimeout(function() {
    console.log("bla, bla, bla, bla");
    callbackhablar();
  }, 1000);
}
function adios(nombre, otrocallback) {
  setTimeout(function() {
    console.log("Adios", nombre);
    otrocallback();
  }, 1000);
}

function conversacion(nombre, veces, callback) {
  if (veces >= 0) {
    hablar(function() {
      conversacion(nombre, --veces, callback);
    });
  } else {
    adios(nombre, callback);
  }
}

console.log("iniciando");
hola("brando", function(nombre) {
  conversacion(nombre, 5, function() {
    console.log("proceso terminado");
  });
});

Aca comparto otro ejemplo donde se utiliza recursividad para solucionar el callback hell. A mi me sirvió como complemento a la clase: http://seanvbaker.com/using-recursion-to-tame-callback-hell/

https://platzi.com/tutoriales/1759-fundamentos-node/4776-youtube/

Les dejo esto para los que tuvimos un poco de confusión en esta octava clase :DDD espero ser un aporte, es un repaso para el que le pueda ayudar.

A seguir aprfendiendo!!! ❤️ ❤️ ❤️

Les comparto código con arrow functions:

const hola = (nombre, myCallback) => {
  setTimeout(() => {
    console.log(`Hola ${nombre}`)
    myCallback(nombre)
  }, 1500)
}

const hablar = (callbackHablar) => {
  setTimeout(() => {
    console.log('Blah blah blah...')
    callbackHablar()
  }, 1000)
}

const adios = (nombre, ultimoCallback) => {
  setTimeout(() => {
    console.log(`Adios ${nombre}`)
    ultimoCallback()
  }, 1000)
} 

const conversacion = (nombre, veces, callbackTermino) => {
  if (veces == 0) {
    callbackTermino(nombre, ()=>{
      console.log('Proceso terminado.')
    })
    return
  }
  hablar(()=> conversacion(nombre, --veces, callbackTermino))
}

console.log('Iniciando Conversación')
hola('Mich', (nombre) => conversacion(nombre, 4, adios))

output:

Iniciando Conversación
Hola Mich
Blah blah blah...
Blah blah blah...
Blah blah blah...
Blah blah blah...
Adios Mich
Proceso terminado.

Dejo mi aporte para mi puntos :v

Creo que aquí esta la diferencia entre algunos programadores entre los que suelen decir “Pero funciona” y los que buscamos entregar un código legible, ordena.

Modular nuestro código es una de las mejores formas para evitar los callbackhell, refactorizar y revisar si hay procesos comunes o repetidos que podamos mejorar en cuanto a orden o sintaxis.

¿Son novatos (como yov’😃 con esto y se perdieron con los callbacks?
washen este video https://www.youtube.com/watch?v=zQVnDW8SaA0

Salu2

El profe: Pues decir hola y adiós no tiene ningún tipo de sentido, hagamos algo más.

yo: Genial vamos a crear una función que se conecte a un servidor o una api y traeremos datos y los analizaremos

El profe: function(){console.log(‘blablabla’)`}

XDD

Clase muy interesante, complementada con el curso de fundamentos de javascript y javascript profesional da una visión muy clara:


function frases(){

    let smartFrases = [
  '1. No hay que ir para atrás ni para darse impulso (Lao Tsé) Una frase motivadora que aconseja seguir siempre nuestro camino a pesar de las adversidades.',
  '2. No hay caminos para la paz; la paz es el camino (Mahatma Gandhi) Gandhi nos dejó para la historia esta preciosa frase sobre la paz.  ',
  '3. Haz el amor y no la guerra (John Lennon) El cantante John Lennon siempre tuvo una mentalidad pacificadora.  ',
  '4. Para trabajar basta estar convencido de una cosa: que trabajar es menos aburrido que divertirse (Charles Baudelaire)  El trabajo, a pesar de que siempre apetezca hacerlo, es bueno para nuestra salud mental.',
  '5. Lo peor que hacen los malos es obligarnos a dudar de los buenos (Jacinto Benavente)  Siempre es mejor ser honrado aunque a veces podamos creer lo contrario.',
  '6. Las guerras seguirán mientras el color de la piel siga siendo más importante que el de los ojos (Bob Marley)  El racismo y los prejuicios han sido la causa de muchas guerras.',
  '7. Aprende a vivir y sabrás morir bien (Confucio)  La vida hay que disfrutarla en cada momento y no estar muerto en vida.',
  '8. Cada día sabemos más y entendemos menos (Albert Einstein)  No importa que cada vez haya más conocimiento si no lo sabemos aplicar.',
  '9. El mundo no está en peligro por las malas personas sino por aquellas que permiten la maldad (Albert Einstein)  Siempre habrá gente mala, pero no podemos dejar que triunfen.',
  '10. La medida del amor es amar sin medida (San Agustín)  Una frase romántica que significa que debemos amar con todo.',
  '11. No hay nada que un hombre no sea capaz de hacer cuando una mujer le mira (Casanova)  El amor de un hombre por una mujer es capaz de mover el mundo.',
  '12. Dar el ejemplo no es la principal manera de influir sobre los demás; es la única manera. (Albert Einstein)  A la hora de educar, es necesario que nosotros mismos seamos coherentes con lo que pretendemos enseñar.',
    ]

    let i = Math.round(Math.random() * smartFrases.length)
    if(smartFrases[i]){
        return console.log(smartFrases[i]) ;
    }else{
        return console.log("Algun sabio mantuvo el silencio, su secreto es que no sabia usar bien el math.random para escoger las frases, ¿podrás ayudarlo?")
    }

}

function Saludo(tipo,nombre, callbackSaludo) {
    setTimeout(function() {
      console.log(tipo + ", " + nombre);
      callbackSaludo(nombre);
    }, 1000);
  }

  function hablar(frases, callbackhablar) {
    setTimeout(function() {
      frases();
      callbackhablar();
    }, 1000);
  }

  

  function conversacion(nombre, veces, callback) {
    if (veces > 0) {
      hablar(frases,function() {
        conversacion(nombre, --veces, callback);
        switch(veces){
           case 11:
               console.log("----------Ha dicho el primer sabio----------")  
            break;
           case 0:
               console.log("----------Ha dicho el último sabio----------")
            break;
           default:
               console.log("----------Ha dicho el siguiente sabio----------");
            break;
        } 
      });
    } else {
      Saludo("Adios",nombre, callback);
    }
  }
  
  
  console.log("Smart Talkers Gonna Talk");

  Saludo("Bienvenidos","Grandes Sabios", function(nombre) {
    conversacion(nombre, 12, function() {
      console.log("El consejo de sabios es muy random, y convocará otra reunión en el palacio Node si lo deseas ;)");
    });
  });

ojala en cursos basicos explicaran con esa facilidad

MINDBLOW!!! Excelente la explicación de Carlos. Aunque la recursividad todavía me cuesta entenderla. Seguiré estudiando.

Siempre supe que algo tenía que ver la recursividad con los callbacks. Muy bueno.

Callback Hell: refactorizar o sufrir


Un callback hell es un concepto en JS que significa que nuestra asincronía se vuelve loca y no podemos gestionarla.

console.log(`Iniciando proceso...`)
hola('Carlos',(nombre) => {
    hablar(() => {
        hablar(() => {
            hablar(() => {
                hablar(() => {
                    hablar(() => {
                        adios(nombre, () => console.log(`Terminando proceso...`))
                    })
                })
            })
        })
    })
})

Para evitar un callback hell como el presentado anteriormente, podemos crear funciones intermediarias

function conversacion(nombre, veces, callback) {
    if (veces > 0) {
        hablar(() => conversacion(nombre, --veces, callback))
    } else {
        adios(nombre, callback)
    }
}

console.log(`Iniciando proceso...`)
hola('Carlos',(nombre) => {
    conversacion(nombre, 3, () => {
        console.log(`Proceso terminado`)
    })
})

Vaya…ésto me voló la cabeza.
Recursividad no la he entendido nunca; llevo 60 años tratatndo de enternderla y sigo sin entenderla.

Que interesante con cada ejemplo quedan mas solidos los conocimientos sobre callbacks

  • Un callback conecta la ejecucion de una funcion detras de otra, es como una carrera en la que los corredores se van pasando la tablilla para que el siguiente siga corriendo
  • Aqui literalmente es…
    • Corre hola con el parametro Adranuz y el callback,
    • Se activa el callback y pasa a la siguiente funcion que recibe un nombre proporcionado en la activación, un 3, y el callback para esta funcion.
    • La funcion conversacion tiene callback que eventualmente será activado y por medio de ello pasara a correr el console.log() final
      Por lo que en este CallbackHell solo vemos dos funciones con callbacks
      */
hola('Adranuz', function(nombre) {
  conversacion(nombre, 3, function(){
    console.log('proceso terminado')
  })
})

/**Pero dentro de conversacion pasan mas cosas

  • lo que tenemos aqui es que al correrse conversacion por primera vez tenemos veces=3
  • por lo que entra en el if, y ese if tiene la funcion-callback “hablar”,
  • por lo que corre su contenido hasta que activa su next callback, que llama a la funcion conversar por segunda vez,
  • esta segunda vez tiene a veces=2 por lo que vuelve a entrar en el if y vuelve a llamar a “hablar” que eventualmente llama a su callback para decirle que ya acabó
  • y entra de nuevo la conversación con veces=1, que sigue entrando en el if
  • por lo tanto seguimos llamando a hablar, que activa su callback y nos mete de nuevo a la conversacion
  • pero esta vez veces=0 por lo que pasa al else
  • que activa adios, este adios recive un nombre y como es una funcion callback recibe tambien un callback, por suerte tenemos un callback en los parametros de conversacion, que es el que libera a converzacion 😮, asi que ese le mandamos
  • Ya dentro de ‘adios’ como es una funcion callback, hace lo suyo y eventualmente libera su callback, liberandose como funcion y al mismo tiempo liberando a la conversacion para que termine de ejecutar su callback.
  • y fin.
    */
function conversacion(nombre, veces, next){
  if (veces > 0) {
    console.log(veces)
    hablar(function(){
      conversacion(nombre, --veces, next)
    })
  } else {
    adios(nombre, next)
  }
}

Codigo comentado de esta clase

Realizar callbacks nos puede resultar bien para gestionar y controlar nuestras funciones asíncronas, pero usar estas en exceso nos puede llevar a un problema conocido callback hell, es el resultado de utilizar demasiados callbacks, que generan un código poco legible y mal organizado.
Para evitar este problema podremos refactorizar nuestro código creando funciones intermediarias, son funciones que tiene una lógica especial para tratar con estos tipos de problemas.
De igual forma, existen otras formas de evitar estos callback hell con las promesas o el async await.

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);
}

function hablar(callbackHablar) {
    setTimeout(function() {
        console.log("Bla bla bla...");
        callbackHablar();
    }, 1000)
}

function conversacion(nombre, veces, callback) {
    if (veces > 0) {
        hablar(function() {
            conversacion(nombre, --veces, callback);
        });
    }
    else {
        adios(nombre, callback);
    }
}

// --
console.log("Iniciando proceso....");

 
hola('Carlos', function(nombre) {
    conversacion(nombre, 3, function() {
        console.log('Proceso terminado...');
    });
});```

Muy buen ejemplo del Callback Hell, con esto me quedo clarisimo que hay que evitar anidar varios Callback juntos.

wow esta clase estuvo intensa.

comparto mi codigo funcional

//funciones
function hola(nombre,miCallback){
    setTimeout(function(){
        console.log('hola,'+nombre);
        miCallback(nombre);
    },1000);
}

function hablar(callbackHablar) {
    setTimeout(function () {
        console.log('bla bla bla bla...');
        callbackHablar();
    },1000);
}

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

function conversacion(nombre,veces,callbackConversacion) {
    if (veces>0) {
        hablar(function(){
            conversacion(nombre,--veces,callbackConversacion);        
        });
    } else {
        adios(nombre,callbackConversacion);
    }
}
//ESto es lo que ejecutara todo 
console.log('Iniciando proceso...')
hola("Alexis",function(nombre){
    conversacion(nombre,3,function(){
        console.log("Proceso terminado");
    });
})

Las funciones recursivas no se utilizan en producción, por eso mejor async - await o promesas.

muy buen aporte… “todo lo que vayamos a reutilizar, que sea una Funcion!!!”

La recursividad ayuda muchísimo en la programacion funcional


Esta clase estuvo excelente!!!
Por fin veo un caso de uso diferente de recursividad.

😶 quedé

Amo este curso

Este ejemplo es de lo mejor que he encontrado en cuanto a callback hell.

Desde antes de darle play sabes que estará buena la clase por la cara del profe

Agregue una función para generar un numero aleatorio para ejecutar conversion, una forma de hacer algo dinámico el script.

// Funciones
function hola(nombre,miCallback){
    setTimeout(function(){
        console.log('hola,'+nombre);
        miCallback(nombre);
    },1000);
}

function hablar(callbackHablar) {
    setTimeout(function () {
        console.log('Estamos en una conversación...');
        callbackHablar();
    },1000);
}

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

function conversacion(nombre,veces,callbackConversacion) {
    if (veces>0) {
        hablar(function(){
            conversacion(nombre,--veces,callbackConversacion);        
        });
    } else {
        adios(nombre,callbackConversacion);
    }
}

function aleatorio(min, max) {
    return Math.round(Math.random() * (max - min) + min);
}

//Esto es lo que ejecutara todo 
console.log('Iniciando proceso...');

hola("Franklyn Villasmil",function(nombre){

    let repeticion = aleatorio(1, 10);

    conversacion(nombre,repeticion,function(){
        console.log("Proceso terminado");
    });
})
function hola(n, f) {
    setTimeout( () => {
        log('Hola '+n)
        f(n);
    },1000) 

}
function hablar(call) {
    setInterval(() => {
        log('I am carlos, and i live in jalpa');    
    }, 1000);
}

function adios(n, fun) { 
    setTimeout(() => {
        log('Adios '+ n)
        fun();
    }, 1000);
 }
function log(str) {
    console.log(str);
}

// --


hola('Carlos Enrique ', (nombre) => {
    adios(nombre, () => log('Terminamos...'))
});```

Importante tener prensente los callbalk, ya que alli es donde se totea. En pocas palabra es usar una funcion recursiva, para mejorar el multiple llamado de un callback hell

 function hola(nombre, micallback) {  
     setTimeout(() => {
         console.log(`hola ${nombre}`);   
         micallback(nombre); 
     }, 1000);
 }

 function hablar(callbackHablar) {
     setTimeout(() => {
         console.log('bla bla bla bla');
         callbackHablar();
     }, 1500);
 }


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

function conversacion(nombre, veces, callback) {
    if (veces >0) {
        hablar(() => { 
            conversacion(nombre, --veces, callback);
        })
    } else {
        adios(nombre, callback);
    }
   
}

//-----------------

//callback hell


console.log('inicia');
hola('Francisco', (nombre) => {
    conversacion(nombre, 3, () => {
        console.log('proceso terminado');
    })
})


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



Mi aporte

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

hablar = (callbackHablar) => {
  setTimeout(() => {
    console.log('Bla bla bla bla...');
    callbackHablar();
  }, 1000);
}

adios = (nombre, otroCallback) => {
  setTimeout(() => {
    console.log('Adios', nombre);
    otroCallback();
  }, 1000);
}

conversacion = (nombre, veces, callback) => {
  if (veces > 0) {
    hablar(() => {
      conversacion(nombre, --veces, callback);
    })
  } else {
    adios(nombre, callback);
  }
}

// --

console.log('Iniciando proceso...');
hola('Ludwing', (nombre) => {
  conversacion(nombre, 2, () => {
    console.log('Proceso terminado');
  });
});
const hola = (nombre, miCallback) =>{
    setTimeout(() => {
        console.log(`Hola ${nombre}`)
        miCallback(nombre)
    }, 1000);
}

const adios = (nombre, otroCallback) =>{
    setTimeout(() => {
        console.log(`Adios ${nombre}`)
        otroCallback()
    }, 1000);
}

const hablar = (callbackHablar) =>{
    setTimeout(() => {
        console.log(`Bla bla bla bla ...`)
        callbackHablar()
    }, 1000);
}


const conversacion = (nombre, veces, callbackConversacion) => {
    if (veces > 0) {
        hablar(function(){
            conversacion(nombre, --veces, callbackConversacion);        
        });
    } else {
        adios(nombre, callbackConversacion);
    }
}

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

//Function recursiva
hola('Juan', (nombre) =>{
    conversacion(nombre, 3, () => {
        console.log(`Finalizando proceso...`)
    })
})

//Function anidada de callbacks
/*
hola('Juan',(nombre) =>{
    hablar(() => {
        hablar(() => {
            adios(nombre, () => {
                console.log(`Finalizando proceso...`)
            })
        })
    })
})
*/

Este es mi codigo, pero se cicla, alguien puede ayudarme!

function hola(n, f) {
    setTimeout( () => {
        log('Hola '+n)
        f(n);
    },1000) 

}
function hablar(call) {
    setInterval(() => {
        log('I am carlos, and i live in jalpa');  
        call();  
    }, 1000);
}

function adios(n, fun) { 
    setTimeout(() => {
        log('Adios '+ n)
        fun();
    }, 1000);
}
function conversacion(nombre, veces, callback) {
    log('numero =>'+veces)
    if (veces > 0)
        hablar( () => conversacion(nombre, --veces, callback))
    else
       callback();
}

function log(str) {
    console.log(str);
}

// --

log('Iniciado');
hola('Carlos Enrique ', (nombre) => conversacion(nombre,3,() => log('termino')));```
function hello(name, myCallback) {
  setTimeout(() => {
    console.log("hello", name);
    myCallback();
  }, 1500);
}

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

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

function conversation(name, times, callback) {
  if (times > 0) {
    speaks(function () {
      conversation(name, --times, callback);
    });
  } else {
    bye(name, callback);
  }
}

console.log("Init process");
hello("George", function (name) {
  conversation(name, 3, function () {
    console.log("End process");
  });
});

me queda la duda de por que al profe le imprime el valor ‘Carlos’ Adios, a mi me la toma como undefined… pero a el se la imprime normal

Yo lo hice de esta forma

console.log("Empieza programa")
saludo("Jeison", function (nombre) {
    conversacion(nombre, 5, function (nombre) {
        despedida(nombre, function () {
            console.log("Finaliza programa")
        });
    })
})

Quise manipular un poco el callback hell con lo visto en clase para que quede más claro el inicio de una función y la llamada de la otra. Espero les sirva tanto como a mi.

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

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

console.log('Iniciando proceso 1 ...');
hola('Andrew', function () {
  hablar(function () { 
    hablar(function () {
      hablar(function () {
        adios('Andrew', function (){
            console.log('Terminando proceso 1');
            loveProof();
        });
      });
    });
  });
});


function hablar (callbackHablar){
  setTimeout( function () {
    console.log('Bla bla bla...');
    callbackHablar();
  }, 500);
}

function conversacion(nombre, veces, callbackSolve) {
  if (veces >= 0) {
    hablar(function () {
      conversacion(nombre, --veces, callbackSolve);
    })
  } else {
    adios(nombre, callbackSolve);
  }
}

function loveProof () {
  console.log('Iniciando proceso 2 ...');
    hola('Andre', function (nombre) {
      conversacion('Andre', 4, function () {
        console.log('Proceso 2 terminado');
      });
    });
}```
  • Todo el código que se necesite reutilizar debe ser ser una función.

  • Crear funciones intermedias que crean funcionalidades específicas.

  • Funciones Recursivas.

No sabia que se podía indicar decremento en los parámetros, gracias por el dato Carlos 😄

Muy buena explicación! 😄

11:20 A, a, lo dijo, lo dijo…

Seria muy bueno tener graficamente el algoritmo para entender mejor.

Es un poco enredado verlo hacer el ejercicio sin saber que esta pensando él…

Se puede mejorar la metología o estrategia pedagogica

Para entender los callbacks tengo que ir paso a paso como si estuviera debuggeando el código, sino como que me pierdo un poco 😅. ¿Alguno le pasa lo mismo?

“Vamos a llamar a Dios”… a que hora se puso espiritual esto…

Que buen intro jajajaja

Para evitar CallbacksHell lo que hacemos es crear funciones intermediarias que nos permitan iterar acciones especificas

Es increible este profesor, antes me costaba entender el callback y ahora me quedó todo mucho más claro
VIVA ESPARTA!

que buen truco!!

Fabuloso!

Hasta aquí he venido a entender como funcionan del todo los callbacks excelente explicación!!

Tuve que ver el video 3 veces pero ya entendí xddxd

Por experiencia, en cualquier lenguaje de backend es importante primero segmentar en funciones cómo medida preventiva.

¡¡Qué elegancia la de Francia con la recursividad!! 😮

JAJAAJAJA

Que coincidencia que le da igual que “sean 3 que 300” (min 11:20) parece que es consciente del parecido!!!

Algo recomendado para las buenas practicas es utilizar arrow function

Ejemplo:

hola('Fernando', (nombre) => {
    adios(nombre, () => {
      console.log('Terminando...');
    });
  });

👌

Excelente clase!

😉

function conversation( name, conversationTimes, callback){
    for(i = conversationTimes; i > 0; i-- ){
        talk()
    }
    bye(name, callback)
}

THIS…IS…SPART…CALLBACKS!!!

My notes
callback Hell
Problema : funciones anidadas poco legibles
Solucion : crear funciones intermedias que creen funcionalidades especificas

jajaja que capo que es el loco! Lo amo!

Genial, así evitamos los callback Hell!!

Callback-Hell: muchos callbacks anidados.

La verdad me gustan más las promises

<code>
const hola = (nombre, MyCallbacks) => {
    setTimeout(() => {
        console.log(`Hola ${nombre}`);
        MyCallbacks()
    },1000)
}
const adiosAsincrona = (nombre, MyCallbackBye) => {
    setTimeout(() => {
        console.log(`adios ${nombre}`)
        MyCallbackBye()
    }, 1000)
}
const hablar = (CallbackHablar) => {
    setTimeout(() => {
        console.log('bla bla bla bla')
        CallbackHablar()
    }, 1000)
}
const conversacion = (nombre, veces, callback) => {
    if (veces >= 0) {
        hablar(() => {
            conversacion(nombre, --veces, callback)
        })
    } else {
        callback(nombre)
    }
}
console.log('iniciando proceso')
hola('Joseph', (nombre) => {
    conversacion(nombre, 3, () => {
        console.log('proceso terminado')
        setTimeout(() =>{
            console.log('ATentamente, Señor Caballo')
        },1000)
    })
})
// soyAsincrona('Joseph', () => {
//     // hablar(() => {
//     //     hablar(() => {
//     //         hablar(() => {
//     //             adiosAsincrona('Señor Caballo', () => {
//     //                 console.log('terminando proceso')
//     //             })
//     //         })
//     //     })
//     // })
// });

La recursividad solución a todos los males (por ahora)

casi me vuelo la cabeza jajajajaja

😉👍

hola a tutti

Realmente sería un infierno.

Callback Hell = > es cuando las personas escriben codigo javaScript de forma tal que la ejecución se realiza usualmente de arriba a abajo.

Bien me rindo , aprenderé a usar Node js para evitar este dolor de cabeza

Callback también conocido como Pyramid doom

Si quieres saber un poquito más les comparto el link de un post que genere hace tiempo

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

function hola(nombre, miCallback){						//2- hola se ejecuta despues de 1500 milisegundos.
    setTimeout(function () {
        console.log('Hola ' + nombre)
        miCallback(nombre)								//3- Llama al callback y le pasa nombre
    }, 1500)
}
function hablar(callbackHablar){						//7- hablar se ejecuta despues de 1000 milisegundos
    setTimeout(function() {
        console.log('Bla bla bla bla...')
        callbackHablar()								//8- Llama al callback
    }, 1000)
}
function adios(nombre, otroCallback){					//11- adios se ejecuta despues de 1000 milisegundos
    setTimeout(function() {
        console.log('Adios ' + nombre)
        otroCallback()									//12- Llama al callback que recibio
    }, 1000)
}
function conversacion(nombre, veces, callback){			//5- conversacion recibe los parametros
    if (veces > 0){									
        hablar(function() {								//6- Llama a hablar y le pasa un callback
            conversacion(nombre, --veces, callback)		//9- El callback llama a conversacion. (Recursividad)
        })												//Le pasa el nombre,veces menos 1,y un callback
    } else {
        adios(nombre, callback)							//10- Cuando veces es 0. Llama a adios. Pasa nombre y un callback
    }													//El callback es el que se pasa de la llamada en hola (punto 4)
}
console.log('Iniciando proceso...')

// SOLUCIÓN CON ESTRUCTURAS DE CONTROL Y RECURSIVIDAD
hola('Mauro', function(nombre){						//1- Llamamos hola. Le pasamos un nombre y un callback que recibe "nombre"
    conversacion(nombre, 3, function(){				//4- El callback llama a conversacion.Le pasa el nombre,veces,y un callback
        console.log('Proceso terminado')			//13- Por ultimo se ejecuta este callback
    })
})

//CALLBACK HELL
hola('Mauro', function (nombre) {
    hablar(function(){
        hablar(function(){
            hablar(function(){
                adios(nombre, function() {
                    console.log('Terminando proceso...')
                })
            })
        })
    })
})

Carlos eres un crack. Nunca pensé usar recursión. Esa es la ventaja de Javascript que puedes usar una función dentro de ella misma antes de ejecución.

Brutal lml

https://blog.nearsoftjobs.com/the-callback-hell-6cc184ce8704
comparto en link que tendrá mas información sobre callbacks

Hola, encontré este articulo en medium que me sirvió para entender totalmente como funciona un callback :

"Supongamos que nos encontramos hablando por teléfono. Al estar hablando nos surge una situación por resolver de manera inmediata. Ponemos la llamada en espera, realizamos lo que tenemos que hacer y cuando terminamos, volvemos a la llamada que dejamos en espera "

Un callback es una función que será ejecutada cuando una operación asíncrona se haya completado. En el caso de la analogía, seria esa situación urgente, y cuando este hecho, ejecutará el callback.

Este es el link: https://medium.com/@_ferh97/conociendo-callbacks-y-promesas-d51f43be5819

espero les sirva tanto como a mi 😄

function hablar(micallback){
   
    setTimeout(function(){
      console.log(" hablando blaa bla bla bla");
      micallback();
    },1000)
}


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

}

function conversacion(nombre,veces,callback){
  
    if(veces >= 0){
    hablar(function() {
        conversacion(nombre, --veces, callback);
    });
   }
   else{
    adios(nombre)
   }
}

function adios(nombre){
    console.log("adios "+ nombre);
}

hola("david",function(nombre){

    conversacion(nombre,6,adios)
})

Super genial esta clase

Excelente profesor.

function conversacion(cuerpo, veces, despedida){
    if(veces > 0){
        setTimeout(()=>{
            cuerpo();
            conversacion(cuerpo,--veces,despedida);
        },1000)
    }else{
        setTimeout(()=>{
            despedida();
        },1000)
    }
}

console.warn("Iniciando...")
conversacion(()=>{console.log("Bla bla bla...")},2,()=>{console.log("Adios...")})

si se pudiera explicar mas el error q tuvo seria mas entendible ya q me perdia en esos casos Gracias

amigo te agradezco mucho estas clases contigo pude entender mejor los callback eres un pro mano !! desde venezuela saludos!!

Sólo dos cosas:

V.Code hace bonito el Call Back Hell 😄