5

Tengo el siguiente método jQuery que ejecuta una instrucción al hacer click en un link (<a>).

$("a.clase_del_elemento").click(function () {

    this.text = "Ejecutando, por favor espere...";

});

Esta primera instrucción es muy simple y se ejecuta inmediatamente.

Ahora si agregamos más instrucciones al método, la primera instrucción tarda más en ejecutarse.

Por ejemplo:

$("a.clase_del_elemento").click(function () {

    this.text = "Ejecutando, por favor espere...";

    una_funcion();
    otra_funcion();
});

La pregunta es ¿Por qué cambia la velocidad de ejecución de la primera instrucción? ¿No debería ser siempre igual?

Pareciera que JavaScript toma un tiempo para hacer algo con todo el código que se incluyó en el método, y luego de terminar ese "algo" comenzará a ejecutar las instrucciones desde el principio, como si hiciera una lectura, comprobación o análisis previo o una "compilación" o algo por el estilo antes de comenzar la ejecución.

En el segundo caso el usuario que hace click va a leer el texto: "Ejecutando, por favor espere..." algunos segundos después, lo cual es indeseable.

2 respuestas 2

2

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:

  1. Caso 1:
    • Ejecutar instrucción this.text = "Ejecutando, por favor espere...";
    • Actualizar DOM (en este momento ya el usuario ve el cambio reflejado)
  2. 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.

2

Lo que ocurre es que Javascript se ejecuta en un sólo hilo y bloquea todo hasta que ese hilo termina. Es por ese motivo, por ejemplo, por el que es una mala idea hacer llamadas AJAX de manera síncrona: si obligas al navegador a esperar a la respuesta, la interfaz deja de responder a los eventos (no funcionan los botones, los enlaces, el scroll...).

Tu código lo que hace es modificar el DOM (el texto de algún elemento visible), pero hasta que tu código no termina de ejecutarse el navegador no actualizará la interfaz de usuario. Es decir, el modelo ha cambiado pero la vista no puede reflejar ese cambio todavía.

Aquí tienes un ejemplo que debería retrasar el cambio del párrafo durante un pequeño momento:

let boton=$('#boton');

let p=$('#texto');

boton.click(function () {
  p.text('Cambiado');
  let resultado=0;
  for (let i=0;i<10000000;i++) {
     let j=new Date();
     resultado+=Math.log(j.getTime());
  }
  console.log(resultado);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="texto">Este texto cambiará al pulsar el botón</p>
<button id="boton">Púlsame</button>

La forma de solucionarlo puede ser compleja o no, dependiendo de la tarea a realizar, pero se basa en una idea sencilla: divide tu código en lotes y ejecuta la tarea lote a lote, dejando al navegador responder entre lotes a cualquier evento:

let boton=$('#boton');

let p=$('#texto');

boton.click(function () {
  p.text('procesando...');
  
  let lotes=0;
  let resultado=0;
  
  function next() {
    for (let i=0;i<10000;i++) {
       let j=new Date();
      resultado+=Math.log(j.getTime());
    }
    lotes++;
    if (lotes<1000) {
      
      setTimeout(next);
      if (lotes%100===0) {
        p.text(`Procesando... ${lotes/10}%`);
      }
    } else {
      p.text('Completado! '+resultado);
    }
  }
  
  next();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="texto">Este texto cambiará al pulsar el botón</p>
<button id="boton">Púlsame</button>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.