I – Funcionamiento interno
La función setTimeout, recibe una función a ejecutar y la cantidad de “timeout” que tome el interprete para ejecutar dicha función
Figura 01
Como vemos en la figura 01, el mensaje se mostrará 2 segundos después de su ejecución.
El problema viene cuando necesitamos que una función o acción, se ejecute después del mensaje anterior.
Figura 02
El sentido común nos dice que el mensaje “Me ejecuto después” se ejecuta después del mensaje “Me ejecuto 2s después”, pero como vemos en la salida no es así.
Figura 03
Esto sucede porque JavaScript, de manera interna, ejecuta la función setTimeout en un contexto de ejecución diferente al de la función por la que fue llamado, esto quiere decir, que mientras se esperan los 2 segundos del setTimeout, continua con el resto de código.
II – Solución
Una solución es abstraer en otra función solo setTimeout y ejecutarlo como una promesa, que como sabemos, se ejecuta de manera asíncrona, recibiendo el tiempo de timeout por parámetros.
Figura 04
Luego llamamos la función sleep que creamos, antecedido de la palabra reservada await.
Figura 05
De esta manera obtenemos la salida que esperamos.
Figura 06
Utilizando promesas y en un par de líneas de código, solucionamos un problema que puede ser un dolor de cabeza para algunos.
Y con esto finalizamos por hoy…
Espero haya sido de ayuda y siéntanse en libertad de comentar cualquier error de tipeo, concepto, omisión o duda que pueda surgir, el feedback es sumamente importante para generar comunidad.
Cuiden su salud y nos leemos en la próxima entrega, adeoh!