Estoy usando clippy.js para hacer que los personajes en la ventana gráfica hablen a través de un globo. Me gustaría que los personajes hablen textos en una secuencia pasando elementos en una matriz que contiene los diferentes textos con un retraso entre pronunciar los textos. Para esto, estoy usando un bucle for con un retraso específico entre los pasajes del texto. Esa parte funciona bien con setTimeout(), pero, probablemente debido a la naturaleza asíncrona de JS, solo se pasa a la función la última variable de texto. Aquí está el fragmento de código:

 for (n=0;n<4;++n){ x = tmptext[n]; setTimeout(() => {agent.speak(x);}, 5000 + n*5000); }

tmptext[] es una matriz que contiene los diferentes textos, y cagent.speak() es la función para hacer que el personaje hable un texto, que por lo demás funciona bien. El problema es que el personaje solo habla el último texto de la matriz 4 veces aunque lo hace con el tiempo adecuado entre ellas. Claramente, la función se ejecuta 4 veces usando solo el valor de la variable x como se le asignó en la última iteración en el ciclo for (que es el valor de x=tmptext[3] en este caso).

Si uso la matriz tmptext[] directamente, no obtengo ningún texto que pase de esta matriz a la función. Por ejemplo,

 for (n=0;n<4;++n){ setTimeout(() => {agent.speak(tmptext[n]);}, 5000 + n*5000); }

Aquí, no se pasa texto como confirmado mediante el uso de alerta en la función cagent.speak() para monitorear esto y, de hecho, el globo aparece vacío 4 veces. Esto se debe a que el valor de n que se está utilizando es su último valor en la iteración, lo que lo convierte en 5 y más allá del alcance de la matriz.

La naturaleza asíncrona de JS parece ser el problema aquí y no estoy familiarizado con el manejo de eso. ¿Cómo paso el valor de cada elemento de la matriz a la función con el tiempo adecuado en el medio? Agradecería ayuda aquí.