Qué son y cómo se implementan el callbacks en JavaScript

Clase 32 de 51 • Fundamentos de JavaScript 2017

Contenido del curso

Estamos renovando el Curso de Fundamentos de Javascript

1
¿Dónde aprender JS actualizado?
00:13 min

Bases del lenguaje

Objetos en JavaScript

Conocimientos intermedios

¿Quién es this?

ECMAScript 5, 2015, 2016, Babel y otros cuentos

Procesos asíncronos

Estructuras de datos y funciones avanzadas

Creando un paquete para NPM

Juego de HTML

Desafíos

Tomar examen

Resumen

Veamos con un ejemplo de la vida real cómo se usan el callback en Javascript y veamos el problema que nos puede generar, el callback hell

Comentarios

Joaquin Araujo

student•

Los concepto de sincronia y asincronia serían muy buenos que estén antes de que Sacha explique los callbacks, las promesas y las funciones Async-await.

Raul Sanchez

student•

Absolutamente deacuerdo contigo

Jose Manuel Montaño Saenz

student•

debería de estar¡¡¡¡¡, estaba tan frustrado

JESUS DARIO MARENCO PORTO

student•

leonidas el mejor aclarado el tema de callbaks

Gregory Lopez

student•

Una explicacion excelente para aclarar esa palabra que tanto se usa y que en lo personal no entendia a que hacia referencia.

Me ha constado entender el concepto de lo que es async await
tanto que cuando escucho la palabra async mi cerebro se paraliza y al escuchar await este explota, y quedo en coma por un tiempo xD

Si pudieras explicar esto con uno de tus ejemplos en verdad te lo agradeceria Prof. Leonidas

Ptt: que no se entere el Prof. Sacha XD

JESUS DARIO MARENCO PORTO

student•

jajaj Gregorlopezdev estamos me ocurrio lo mismo

Paul Santaria

student•

grande leonidas tu manera de explicar en muy buena entendi mejor el setTimeout…

Ivan Santiago

student•

Callback Hell

moises mannarino

student•

leonidas explicas muy bien, tendrias que dar el curso de react

Alexis Antonio Moraga Gallardo

student•

Muy buena explicación de @leonidasEsteban.

Les comparto mi repositorio en GitHub con el avance del curso
Repositorio

En el están los ejercicios realizados en clases comentados junto a mis notas personales.

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de callbacks</title>
  </head>
  <body>
    <h1>Ahora estoy <span id="accion">Durmiendo...</span></h1>


    <script>
      const DESPERTAR = 3000//declaramos conatantes con un valor en milisegundos
      const DUCHA = 2000//declaramos conatantes con un valor en milisegundos
      const VESTIRSE =2000//declaramos conatantes con un valor en milisegundos
      const DESAYUNAR = 3000//declaramos conatantes con un valor en milisegundos
      const PLATZI = 5000//declaramos conatantes con un valor en milisegundos
      const $agenda = document.getElementById('accion')//tomamos el elemento del dom y lo guardamos en la constante $agenda

      setTimeout(()=>{//usamos un setTimeout para cambiar el valor del elemento del dom asignado a la constante $agenda
        $agenda.innerHTML=`Despertando...`

        setTimeout(()=>{//una vez ejecutado el primer timeout encadenamos un segundo para cambiar nuevamente el elemento del dom
          $agenda.innerHTML=`Duchandome...`
          setTimeout(()=>{//una vez ejecutado elsegundo encadenamos un tercero
            $agenda.innerHTML=`Vistiendome...`
            setTimeout(()=>{//y encadenamos un cuarto
              $agenda.innerHTML=`Desayunando...`
              setTimeout(()=>{//finalmente encadenamos un quinto timeout
                $agenda.innerHTML=`Estudiando en Platzi...`
              },PLATZI)
            },DESAYUNAR)
          },VESTIRSE)
        },DUCHA)
      },DESPERTAR)
    </script>
  </body>
</html>

<!--Callback hell

que es esto.
el callback hell se produce cuando comenzamos a anidar callbacks tras callcacks tras callcacks, como vimos en el ejemplo

que es un callback
un callbac es el llamado a una funcion desde otra funcion, esto es un concepto teorico, y lo usamos conatantemente
cuando pasamos funciones como parametros, o llamamos a otras funciones desde nuestras funciones

 -->

Freddy Córdova Arana

student•

Muchas gracias @alexisMoragaa

Javier Vargas

student•

Excelente explicación de porque los procesos asíncronos evolucionaron!
Hay un punto en el que pierdes la noción de las relaciones ya sea de tiempo o de errores

Jose Manuel Montaño Saenz

student•

Que buena explicación leonidas

Francisco Escobar

student•

Gracias leonidas !! quedo claro !!

KEVIN BRAYAN LUNA FIGUEROA

student•

Me ha quedado super claro el tema de los callbacks, gracias Leonidas!! 😃

Luis Angel Vásquez Nepomuceno

student•

Leonidas, eres todo un genio !! de verdad que eres un gran maestro, realmente explicas las cosas de una forma tan sencilla y amena 😄 muchas gracias !
Seria genial que hicieras (¿o ya existe?) un curso de javascript para alumnos que no tenemos tanta experiencia con la programación.

Yesica Lizeth Cortés Pineda

teacher•

Nop, pero Leo ha hecho muchos otros cursos, y también tenemos una Escuela de JavaScript en la que podemos hacer clases para enfatizar en aquellos conceptos que son complejos de entender y Leo nos ayuda frecuentemente allí, si tienes alguna duda avísame y vemos como resolverla.

Luis Angel Vásquez Nepomuceno

student•

Hola
Muchas gracias! Todos son súper geniales y amables, y claro que si tengo alguna duda importante te preguntare. Saludos

Johan Alejandro Lopez Arias Alejandro Lopez Arias

student•

Asi fue como escribi el código de esta lección. Sin generar un callback hell como tal. Lo que hice fue escribir una variable para cada función de cada una de las 5 acciones del día , luego puse los llamados a la siguiente función dentro de estas. Se genera un código mas legible.

<code
const DESPERTAR = 3000;
const DUCHA = 2000;
const VESTIRSE = 2000;
const DESAYUNAR = 3000;
const PLATZI = 5000;
//generalmente las constantes se ponen en mayuscula

const $txt = document.getElementById('txtC')

const _Primero = () =>{
	$txt.textContent = 'Estoy despertando';
	setTimeout(_Segundo,DUCHA);
};
const _Segundo = () =>{
	$txt.textContent = 'Estoy duchandome';
	setTimeout(_Tercero,VESTIRSE);
};
const _Tercero = () =>{
	$txt.textContent = 'Estoy vistiendome';
	setTimeout(_Cuarto,DESAYUNAR);
};
const _Cuarto = () =>{
	$txt.textContent = 'Estoy desayunando';
	setTimeout(_Quinto,PLATZI);

};
const _Quinto = () =>{
	$txt.textContent = 'Estoy estudiando en Platzi';
};

setTimeout(_Primero,DESPERTAR);
>

Rogelio Torres Dueñas

student•

No tengo nada en contra de Sacha pero me parece que Leonidas debió hacer este curso desde el inicio, siento que mi curva de aprendizaje es mayor con su forma de explicar, los ejemplos y hasta el humor que tiene.

¡Team Leonidas!

Kevin Antonio Nava Garcia

student•

Un video de 14 min que me parecio de 2 min por tan buena explicación

Alexander Marenco

student•

que buen ejemplo 😄

Ignacio Esteban Aredez Diaz

student•

El orden de los videos no ayuda esto deberia estar antes. Muchas gracias Leonidas el video fue muy instructivo.

Gerardo Manuel Reyes Fernández

student•

Creo que esta sección es asíncrona.
Gracias Leonidas por tus explicaciones

Ramón Alberto Peralta Paulino

student•

SIMPLEMENTE PLATZI ES INCREIBLE

Juan David Granados Figueroa

student•

a mi me parece que sacha no explico detalladamente esta parte, pero me gustaba mucho como explicaba el, y lo extraño, porque con leonidas me aburro mucho aunque no es que explique mal

Carlos Danilo Vargas Caviedes

student•

!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="main.js"></script>
</head>
<body>

  <h1 id="texto">Estoy despertando</h1>  

  <script>
    const LEVANTARME = 1000;
    const CEPILLARME = 2000;
    const BAÑARME = 3000;
    const DESAYUNAR = 4000;
    const TRABAJAR = 5000;
    const PLATZI = 6000;
    //Callnack hell es el proceso anidado de callbacks para realizar un solución mediante un tiempo determinado 
    // o de espera 
    const cambioTexto = document.getElementById("texto");
    setTimeout(()=>{
      cambioTexto.textContent = "Ahora me estoy duchando";
      setTimeout(()=>{
        cambioTexto.textContent = "Ahora me estoy cepillando";
        setTimeout(()=>{
          cambioTexto.textContent = "Ahora estoy bañandome";
          setTimeout(()=>{
            cambioTexto.textContent = "Ahora Estoy desayunando";
            setTimeout(()=>{
              cambioTexto.textContent = "Estoy en el trabajo";
              setTimeout(() =>{
                cambioTexto.textContent = "Estoy realizando los mejores cursos de platzi";
              }, 6000);
            }, 5000)
          }, 4000);
        }, 3000);
      }, 2000);
    }, 1000);
  </script>
</body>
</html>```

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>Ejemplo de callbacks</title>
  </head>
  <body>
    <h1>Ahora estoy <span id="accion">Durmiendo...</span></h1>


    <script>
      const DESPERTAR = 3000//declaramos conatantes con un valor en milisegundos
      const DUCHA = 2000//declaramos conatantes con un valor en milisegundos
      const VESTIRSE =2000//declaramos conatantes con un valor en milisegundos
      const DESAYUNAR = 3000//declaramos conatantes con un valor en milisegundos
      const PLATZI = 5000//declaramos conatantes con un valor en milisegundos
      const $agenda = document.getElementById('accion')//tomamos el elemento del dom y lo guardamos en la constante $agenda

      setTimeout(()=>{//usamos un setTimeout para cambiar el valor del elemento del dom asignado a la constante $agenda
        $agenda.innerHTML=`Despertando...`

        setTimeout(()=>{//una vez ejecutado el primer timeout encadenamos un segundo para cambiar nuevamente el elemento del dom
          $agenda.innerHTML=`Duchandome...`
          setTimeout(()=>{//una vez ejecutado elsegundo encadenamos un tercero
            $agenda.innerHTML=`Vistiendome...`
            setTimeout(()=>{//y encadenamos un cuarto
              $agenda.innerHTML=`Desayunando...`
              setTimeout(()=>{//finalmente encadenamos un quinto timeout
                $agenda.innerHTML=`Estudiando en Platzi...`
              },PLATZI)
            },DESAYUNAR)
          },VESTIRSE)
        },DUCHA)
      },DESPERTAR)
    </script>
  </body>
</html>

<!--Callback hell

que es esto.
el callback hell se produce cuando comenzamos a anidar callbacks tras callcacks tras callcacks, como vimos en el ejemplo

que es un callback
un callbac es el llamado a una funcion desde otra funcion, esto es un concepto teorico, y lo usamos conatantemente
cuando pasamos funciones como parametros, o llamamos a otras funciones desde nuestras funciones

 -->

<code
const DESPERTAR = 3000;
const DUCHA = 2000;
const VESTIRSE = 2000;
const DESAYUNAR = 3000;
const PLATZI = 5000;
//generalmente las constantes se ponen en mayuscula

const $txt = document.getElementById('txtC')

const _Primero = () =>{
	$txt.textContent = 'Estoy despertando';
	setTimeout(_Segundo,DUCHA);
};
const _Segundo = () =>{
	$txt.textContent = 'Estoy duchandome';
	setTimeout(_Tercero,VESTIRSE);
};
const _Tercero = () =>{
	$txt.textContent = 'Estoy vistiendome';
	setTimeout(_Cuarto,DESAYUNAR);
};
const _Cuarto = () =>{
	$txt.textContent = 'Estoy desayunando';
	setTimeout(_Quinto,PLATZI);

};
const _Quinto = () =>{
	$txt.textContent = 'Estoy estudiando en Platzi';
};

setTimeout(_Primero,DESPERTAR);
>

!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Page Title</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
  <script src="main.js"></script>
</head>
<body>

  <h1 id="texto">Estoy despertando</h1>  

  <script>
    const LEVANTARME = 1000;
    const CEPILLARME = 2000;
    const BAÑARME = 3000;
    const DESAYUNAR = 4000;
    const TRABAJAR = 5000;
    const PLATZI = 6000;
    //Callnack hell es el proceso anidado de callbacks para realizar un solución mediante un tiempo determinado 
    // o de espera 
    const cambioTexto = document.getElementById("texto");
    setTimeout(()=>{
      cambioTexto.textContent = "Ahora me estoy duchando";
      setTimeout(()=>{
        cambioTexto.textContent = "Ahora me estoy cepillando";
        setTimeout(()=>{
          cambioTexto.textContent = "Ahora estoy bañandome";
          setTimeout(()=>{
            cambioTexto.textContent = "Ahora Estoy desayunando";
            setTimeout(()=>{
              cambioTexto.textContent = "Estoy en el trabajo";
              setTimeout(() =>{
                cambioTexto.textContent = "Estoy realizando los mejores cursos de platzi";
              }, 6000);
            }, 5000)
          }, 4000);
        }, 3000);
      }, 2000);
    }, 1000);
  </script>
</body>
</html>```

Qué son y cómo se implementan el callbacks en JavaScript

Estamos renovando el Curso de Fundamentos de Javascript

¿Dónde aprender JS actualizado?

Bases del lenguaje

Bienvenido al curso

Calcula el área de un triángulo. Creando funciones

¿Quiénes pueden pasar a ver una película? Ejercicio con condicionales, expresiones y booleanos

Inventar un idioma manipulando strings

¿Cuántos kms corre una persona en promedio? Entendiendo el ciclo for

¿Quién gana en una pelea: Gokú o Superman? Resolviendo este problema con ciclos while

¿Cuánto tiempo pasó desde tu fecha de nacimiento?

Objetos en JavaScript

Calcular la distancia entre dos puntos - Objetos en JavaScript

Agrega métodos para mover los puntos - Objetos Avanzado en JavaScript

Definiendo la clase Punto - Prototipos en JavaScript

Definiendo la clase Punto - Object.create en JavaScript

Definiendo la clase Punto - Class en JavaScript

Conocimientos intermedios

Entiende el scope de las variables

Operaciones con arrays

Entiende los closures de JavaScript

Estructura del lenguaje

¿Quién es this?

This, _this y los arrow functions

La función bind

call y apply

ECMAScript 5, 2015, 2016, Babel y otros cuentos

ECMAScript: El estándar en el que se basa JavaScript

Babel al rescate: logrando la compatibilidad buscada

Distintas formas de escribir módulos en JavaScript

Procesos asíncronos

No generes un cuello de botella en el EventLoop

Los callbacks de JavaScript

Callback a un servidor externo

Promesas

Async-await

Implementación de set timeout en JavaScript

Implementación de set interval en JavaScript

Cancelando el Timeout y el Timeinterval