¿Cómo ejecutar de forma sincrónica una función asíncrona en JavaScript?

Question

Estoy haciendo un pequeño proyecto personal, una "escape room" virtual, para aprender un poco más sobre JavaScript y algunas librerías. En una de las pruebas, aparecería un mensaje que se iría escribiendo solo (usando la librería TypeIt). Ese texto haría ciertas preguntas que el usuario debería resolver (por ejemplo, introducir algún texto en un input). Si la "contraseña" es correcta, la pantalla escribiría más y la prueba sería completada.

La librería incluye una función, .exec(), la cuál me permite ejecutar asincrónicamente una función. Pensé en usar eso para parar la ejecución del programa, y reanudar la acción cuando el objetivo estuviera completo. Eso funcionaría si la función fuera sincrónica, pero .exec() es asincrónico, y por lo que he investigado, el programa llamaría a la función pero seguiría ejecutándose lo de luego.

Me gustaría preguntar cómo conseguir mi objetivo, para entender más acerca de los programas asíncronos. Aquí dejo mi código:

const instance = new TypeIt("#elementToType",{})

instance
.type("¡Bienvenido! ")
.pause(2500)
.type("¿Eres tú?")
.exec(async () => await tellMe())
.pause(1500)
.type("¡Correcto!")
.go()


function tellMe() {
    console.log("¡Hola!")
    // Aquí, por ejemplo, me gustaría que el usuario escribiera en un input
    // y se comprobase si el texto es el correcto, si es así, sigue ejecutando el código. 
}

<script src="https://unpkg.com/typeit@8.0.3/dist/index.umd.js"></script>
<span id="elementToType"></span>

Agradecería mucho ayuda para entender cómo usar correctamente el asincronismo. Muchas gracias.

Esta [pregunta es muy popular](https://es.stackoverflow.com/questions/277690/qué-diferencias-hay-entre-callbacks-promises-y-async-await/277693#277693), saludos — g.4, Sep 17 '21 at 12:29

score 2 · Accepted Answer · answered Sep 17 '21 at 13:53

2

Si sólo quieres elegir entre seguir o parar, no necesitas preocuparte demasiado por la asincronía, simplemente usa freeze()/unfreeze:

const instance = new TypeIt("#elementToType",{})

instance
.type("¡Bienvenido! ")
.pause(2500)
.type("¿Eres tú?")
.exec(tellMe)
.type("Lo sabía!")
.go()


function tellMe() {
    if (!confirm("¿Eres tú?")) {
      instance.freeze();
    }
}

<script src="https://unpkg.com/typeit@8.0.3/dist/index.umd.js"></script>
<span id="elementToType"></span>

Si lo que quieres es cambiar lo que se va a ejecutar, me temo que no es posible: no he encontrado en la documentación una forma de añadir o cambiar el texto a escribir una vez la instancia se ha iniciado (has llamado a .go()).

answered Sep 17 '21 at 13:53

Pablo Lozano

45,934
7
48
87

Gracias por contestar y por tu tiempo. Sí, freeze() parece ser la mejor solución, aunque tiene ciertas limitaciones (el cursor también se congela, y es imposible controlar qué texto saldrá después). Pero, no es nada importante, y creo que freeze() será útil. Una pregunta, ¿por qué usas !confirm()? ¡Gracias! – Tupi Sep 17 '21 at 15:01
Era una forma rápida de tener información del usuario – Pablo Lozano Sep 17 '21 at 15:24
No la conocía, gracias por enseñármela. – Tupi Sep 17 '21 at 15:43

¿Cómo ejecutar de forma sincrónica una función asíncrona en JavaScript?

1 Answers1