Callbacks síncronos y asíncronos en JavaScript

¿Qué es un callback?

Un callback es una función pasada como parámetro a otra función para que pueda ser ejecutada en un determinado momento.

El fin de meter una función dentro de otra (callback) es especialmente útil y nos va a servir para poder indicar que durante la ejecución de la función principal (la que llama a los callbacks), en un momento preciso de la ejecución de la función (el que nosotros queramos), para que ejecute lo que le hemos pasado en el parámetro callback. Por ejemplo, cuando haya terminado de ejecutar una instrucción o un bloque que realice una llamada al callback (una función pasada en la zona de parámetros de otra función) .

Callbacks síncronos VS callbacks asíncronos diferencias

Dentro de los callbacks tenemos dos tipos:

  • Callbacks síncronos: ejecución de un solo proceso de manera simultánea.
  • Callbacks asíncronos: ejecución de procesos ejecutándose de manera simultánea.

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. Durante el transcurso de esos milisegundos se pueden ir ejecutando y resolviendo varios procesos de forma simultánea. Una vez consumido el tiempo de espera, la función que teníamos a la espera también se resolverá.

¿Qué tenemos que tener en cuenta cuando realizamos un callback?

  • Cuando una función va a ser utilizada como un callback, solemos identificar la función con un nombre que deje claro que va a ser un callback un ejemplo: callbackHola. También es muy común utilizar fn en la zona de parametros para saber que lo que pasamos en la zona de parametros es una función.

  • Las funciones que son pasadas como callbacks dentro de la zona de parámetros se escriben sin parentesis () ya que por el momento van a ser ejecutadas, sino que simplemente van a pasarse al interior de dicha función para su ejecución en un momento determinado. Para ejecutarlas dentro de la función donde son pasadas como callback esta vez si que son llamadas con parentesis.

  • No podemos pasar un parametro a un callback que ya si esta se encuentra dentro de la zona de parámetros de una función y esto supondría añadir parentesis y los callbacks en la zona de parámetros no pueden llevarlos ya que sino estamos ejecutando la función y no pasandola como parametro y nos provocará conflictos.

Necesitamos pasarle dos parámetros a la función que llama a los callbacks y posteriormente distribuir dichos callbacks. Vamos a ver un ejemplo:

Ejemplos de callbacks síncronos

Vamos a ver un ejemplo desde JSBIN.com:

Una función necesita ejecutar todas sus instrucciones para poder finalizar su ejecución. Por lo que, una vez llamada la función mundo nos adentramos en su interior, para poder finalizar su ejecución es necesario primeramente ejecutar la instrucción console.log de su interior que contiene un llamada hacía callbackHola(). Por tanto, este será el primer elemento en ejecutarse (el callbackHola). Y posteriormente, una vez se finaliza la ejecución del callback, se realiza la ejecución de la instrucción console.log de la función que realiza la llamada al callback (la función mundo). Y finalmente, como ya no hay más líneas, se detendrá el flujo de ejecución. Por tanto, el flujo de ejecución será callBackHola, y posteriormente mundo.

Esto, claramente es un ejemplo de ejecución sincrona debido a que solamente se ejecuta un proceso de manera simultánea.

Si añadimos otro callback al ejemplo anterior, podemos ver qué mundo llama a dos atributos concretamente dos callback). En este caso, ambos atributos son callbacks. El flujo de ejecucción será entramos en la función mundo y llamamos al callbackHola (primer callback que es llamado), luego lo concatena con mundo y llama al siguiente callback (callbackPresentacion) y finalmente ejecutamos el console.log de mundo.

Vamos a ver otro ejemplo y después los explicamos detalladamente:

El flujo de ejecución de una función que tiene callbacks se ejecutan en el orden de llamada.

Si nos fijamos se ejecuta de forma sincrona. Es decir, secuencialmente, primero una y posteriormente otra. Esto es debido a que se bloquea el hilo de ejecución y de esta forma nos aseguramos que el flujo de ejecución pasa de la forma que queramos nosotros. Paso a paso y función a función.

Ejemplo de callbacks asíncronos

Podemos revertir este comportamiento añadiendo por ejemplo un setTimeOut ¿Qué pasaría si le metemos un settimeout? Que el comportamiento cambiaría a asonicrono ya que continuaría con la ejecución de lo que pueda ir ejecutando sin esperar a que finalice la función anterior. Sin bloquear el hilo vamos.

El resultado con los callbacks en sincrona es sota, caballo y rey. En cambio, si ejecutamos el código del nuevo ejemplo, con callbacks asíncronos, cada segundo nos aparece un elemento en el siguiente orden: rey, sota y caballo. Según su orden de finalización.

Tras 1000 ms (1 segundo):

Tras 2000 ms (2 segundo):

Tras 3000 ms (3 segundo):

¿Cuándo usar callbacks síncronos y cuando callbacks asíncronos?

Dependerá de lo que queramos hacer si queremos una secuencia de tareas secuenciales como imprimir algo en un orden (como el ejemplo de sota caballo y rey), lo recomendable es utilizar callbacks síncronos ya que respetará el orden secuencial y nos aseguraremos de que este orden es correcto.

En cambio, si por ejemplo vamos a realizar una petición REST o una consulta a una BBDD que puede tardar mucho en cargar, la mejor opción es usar callbacks asíncronos. Y que así, podemos ir ejecutando e ir cargando otros elementos o datos sin que se bloquee el hilo de ejecución de JavaScript. Y una vez llegue la respuesta, enviarla a donde sea.

La gracia de los callbacks principalmente es usarlos de forma asincrona ya que son mucho más potentes.

Espero que os haya gustado. Saludos y hasta la próxima

25 comentarios

  1. When someone writes an article he/she retains the plan of a user in his/her brain that how a user can be aware of it.

    Therefore that’s why this article is great. Thanks!

  2. Attractive portion of content. I simply stumbled upon your weblog
    and in accession capital to claim that I acquire actually enjoyed account your blog
    posts. Anyway I will be subscribing for your feeds and even I success you
    get admission to persistently fast.

    Feel free to visit my web-site; Nature Fused Cream Review

  3. Somebody necessarily assist to make significantly posts I would state.
    That is the very first time I frequented your website page and up to
    now? I amazed with the research you made to make this particular post extraordinary.
    Wonderful activity!

  4. whoah this blog is fantastic i really like reading your posts.

    Stay up the good work! You realize, a lot of people are hunting around for
    this information, you could help them greatly.

    Check out my web-site Tetra Male Enhancement (http://www.comptine.biz/modules.php?name=Your_Account&op=userinfo&username=AbigailCon)

  5. I visit daily some sites and information sites to read articles
    or reviews, except this weblog provides quality
    based content.

  6. Awesome! Its truly awesome post, I have got much clear idea concerning from this piece of writing.

  7. Amazing issues here. I am very glad to peer
    your article. Thank you a lot and I’m taking a look forward
    to touch you. Will you kindly drop me a mail?

    Also visit my blog: True Burn Keto Reviews

  8. I really like looking through an article that can make
    people think. Also, many thanks for permitting me to comment!

    Here is my web blog – The Skin Company

  9. Hello! I could have sworn I’ve been to this blog before but after reading through some of
    the post I realized it’s new to me. Nonetheless, I’m definitely glad
    I found it and I’ll be bookmarking and checking back often!

    Also visit my blog – http://duna-anapa.net.ru/modules.php?name=Your_Account&op=userinfo&username=YokoyamaBernadette

  10. I have learn several just right stuff here. Certainly worth bookmarking for revisiting.
    I surprise how a lot attempt you place to create one of these wonderful informative website.

  11. Thanks for sharing your thoughts about website. Regards

  12. Oh my goodness! Awesome article dude! Many thanks, However I am encountering problems with your RSS.
    I don?t know the reason why I am unable to subscribe to it.
    Is there anyone else getting the same RSS issues? Anybody
    who knows the answer will you kindly respond?
    Thanks!!

    my homepage … Libido Boost Pills Reviews

  13. Some genuinely excellent content on this internet site, thanks for contribution.

    Here is my site … http://forum.adm-tolka.ru/viewtopic.php?id=745591

  14. I am regular visitor, how are you everybody?
    This article posted at this website is really good.

    Also visit my webpage … shihan.com.ru

  15. Good write-up, I am normal visitor of one’s web site,
    maintain up the nice operate, and It’s going to be a regular visitor for a
    lengthy time.

    My web site: Botanical Farms CBD Gummies Reviews

  16. This is a great tip especially to those new to the blogosphere.
    Simple but very precise information… Appreciate your sharing this one.

    A must read post!

  17. If some one wants to be updated with newest
    technologies therefore he must be pay a quick visit this website
    and be up to date daily.

    Also visit my web site … Dermal Pearle Reviews

  18. hello there and thank you for your info – I have
    definitely picked up anything new from right here.
    I did however expertise several technical points using this web site,
    since I experienced to reload the website a lot of times previous to I could get it to load correctly.
    I had been wondering if your web host is OK?
    Not that I’m complaining, but sluggish loading instances times will very frequently affect your placement in google and can damage your quality score if advertising and marketing with Adwords.
    Well I’m adding this RSS to my e-mail and can look out for much more of your respective interesting content.
    Ensure that you update this again very soon..

    Have a look at my page; http://www.meteoritegarden.com

  19. Very good article. I definitely love this website. Keep writing!

  20. I am so happy to read this. This is the type of manual that
    needs to be given and not the accidental misinformation that’s at the other blogs.
    Appreciate your sharing this greatest doc.

    Also visit my site Brilliance Keto

  21. We wish to thank you once again for the stunning
    ideas you offered Janet when preparing a post-graduate research in addition to, most importantly, pertaining to providing the many ideas in one blog post.
    Provided that we had known of your website a year ago, i’d have been saved
    the nonessential measures we were participating in. Thank you very much.

    Also visit my blog post :: Imarais Beauty Cream

  22. Nice post. I used to be checking constantly
    this blog and I’m inspired! Very helpful info particularly the ultimate section 🙂 I deal with such info much.
    I used to be seeking this particular information for a long time.
    Thanks and good luck.

    Also visit my site; Strawberry Fields CBD Gummies

  23. If you want to increase your knowledge just keep visiting this web site and be updated with
    the most up-to-date gossip posted here.

  24. This article presents clear idea in support of
    the new visitors of blogging, that in fact how to do running a blog.

  25. A motivating discussion is definitely worth comment.
    I do believe that you ought to write more on this subject
    matter, it may not be a taboo subject but usually folks don’t speak
    about such subjects. To the next! All the best!!

    Also visit my page – VirgoFX Male Enhancement

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

La Ley 34/2002 nos obliga a avisarte de que usamos cookies propias y de terceros con objetivos estadísticos y de sesión y para mostrarte la 'publi' que nos da de comer. Tranquilo, este mensaje solo sale una vez. Más información

Java desde 0 comunica a los usuarios, a través de este aviso, que puede utilizar cookies cuando el usuario navega por las diferentes pantallas y páginas del sitio. Durante el uso de nuestra página Web usted acepta y autoriza expresamente el uso de cookies, de acuerdo con nuestra Política de Privacidad. Este sitio web utiliza las siguientes cookies propias: - Cookies de sesión, para garantizar que los usuarios que escriban comentarios en el blog sean humanos y no aplicaciones automatizadas. De esta forma se combate el spam. Este sitio web utiliza las siguientes cookies de terceros: - Google AdManager y AdSense: Utiliza cookies para mejorar la publicidad. Entre otros fines, suelen utilizarse para segmentarla según el contenido que sea relevante para los usuarios o su ubicación, mejorar los informes de rendimiento de las campañas y evitar mostrar anuncios que los usuarios ya hayan visto. Las cookies no contienen información personal identificable. Consulta cómo utiliza Google la información de sitios web o aplicaciones. y cómo bloquear determinados anuncios. - Google Analytics: Almacena cookies para poder elaborar estadísticas sobre el tráfico y volumen de visitas de esta web. Al utilizar este sitio web está consintiendo el tratamiento de información acerca de usted por Google. Por tanto, el ejercicio de cualquier derecho en este sentido deberá hacerlo comunicando directamente con Google. - Redes sociales: Cada red social utiliza sus propias cookies para que usted pueda pinchar en botones del tipo Me gusta o Compartir.

Cerrar