En caso de que las instrucciones una_funcion
y otra_funcion
sean síncronas la explicación sería la siguiente.
En el segundo caso la primera instrucción no demora más en ejecutarse, de hecho se ejecuta a la misma velocidad que en el primer caso.
Lo que cambia es cuan ocupado está el proceso para poder renderizar el nuevo valor de this.text
en el DOM.
En el primer caso, luego de la primera instrucción no se ejecutaba mas nada, por lo que el proceso continuaba la ejecución de la(s) próxima(s) acción(es) (actualizar el valor de la variable en el DOM).
En el segundo caso antes de actualizar el valor de this.text
en el DOM, debe ejecutar las acciones una_funcion();
y otra_funcion();
.
Miralo de esta forma:
- Caso 1:
- Ejecutar instrucción
this.text = "Ejecutando, por favor espere...";
- Actualizar DOM (en este momento ya el usuario ve el cambio reflejado)
- Caso 2:
- Ejecutar instrucción
this.text = "Ejecutando, por favor espere...";
- Ejecutar instrucción
una_funcion();
- Ejecutar instrucción
otra_funcion();
- Actualizar DOM (en este momento ya el usuario ve el cambio reflejado)
Para resolver el caso de que el usuario ve el texto luego de unos segundos pudieras envolver las llamada a las dos funciones en un timeout
, lo que permitiría ejecutar la instrucción this.text = "Ejecutando, por favor espere...";
y actualizar el DOM en el mismo tick
y en el siguiente tick
llamar las otras dos instrucciones. Algo así (Puedes ejecutar el ejemplo debajo para lograr una demostracion de como se debería ver):
$("a.clase_del_elemento").click(function() {
this.text = "Ejecutando, por favor espere...";
setTimeout(function() {
una_funcion();
otra_funcion();
});
});
// demo
function esperar(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function una_funcion() {
console.log('ejecutando operaciones que demoran en una_funcion...');
await esperar(2000);
console.log('una_funcion TERMINO');
}
async function otra_funcion() {
console.log('ejecutando operaciones que demoran en otra_funcion...');
await esperar(3000);
console.log('otra_funcion TERMINO');
}
// end demo
$("a.clase_del_elemento").click(function() {
this.text = "Ejecutando, por favor espere...";
setTimeout(function() {
una_funcion();
otra_funcion();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="clase_del_elemento">Click</a>
En caso de que las instrucciones una_funcion
y otra_funcion
sean asíncronas debe hacerse un análisis mas profundo aportando mas detalles al escenario debido a la complejidad intrínseca de las ejecuciones asíncronas.