6

Quiero saber cuando todos los controladores de eventos en un evento en JavaScript se terminen. ¿Eso es posible?

Ejemplo:

<button id='button' ...>Submit</button>
<script>
   ultimo = notify() {
       alert("Último!");
   };
   $( '#button' ).on('click', function() { alert('Primero') });
   $( '#button' ).on('click', function() { alert('Segundo') });
   $( '#button' ).on('click', ultimo );
</script>

Con este código, voy a recibir 3 alertas: Primero, Segundo y Último.

Pero el último quizás no sea el último si hay código en otro lado que añada otros controladores.

Entonces, ¿hay una forma de saber cuando todos los controladores de un evento terminen?

Para ser más especifico, estoy escribiendo una biblioteca, y quiero hacer algo en un evento, pero solo después de todos los controladores que pueden ser añadidos de los usuarios de mi biblioteca.

3
  • De unos elementos específicos, o de la toda página? Y puede ser sólo eventos de jQuery (no eventos de DOM, que no usa jQuery)? Commented el 3 ene. 2016 a las 19:07
  • @DuckMaestro: Todos será lo mejor, pero creo que no es posible. Entonces aceptaré una respuesta de solo los de jQuery.
    – Flimzy
    Commented el 3 ene. 2016 a las 20:21
  • Creo que una via para llegar a una respuesta es usando observables de Rxjs no estoy seguro, pero solo por jquery creo que sera complicado.
    – Wilfredo
    Commented el 4 ene. 2016 a las 15:08

3 respuestas 3

1

Hay una opción posible basada en esta pregunta del sitio en inglés (y en concreto en las respuestas de dowski y de Avram Lavinsky), usando eventos personalizados, los metadatos que jQuery proporciona con $._data(), y sabiendo que los eventos se ejecutan en el orden en el que se asociaron al elemento.

La idea (que sólo funcionaría con los eventos asociados con jQuery) sería la siguiente:

  • Crear un evento personalizado (vamos a ponerle de nombre afterclick) y añadir en él todo el código que quieres que se ejecute al terminar los clicks.
  • ANTES de que ningún evento se asocie con el elemento, asociar tu propio detector de click que:

    1. Prevenga la propagación del evento de manera inmediata (ni siquiera los siguientes clicks). Esto se puede hacer con stopImmediatePropagation().
    2. Ejecute todas las funciones asociadas al evento click en orden (se puede obtener un array con esas funciones usando $._data(this, "events").click).
    3. Solicite la ejecución del evento personalizado.

A simple vista parece simple, ¿no? Y el código no sería muy complejo tampoco:

// asociamos un event listener con el elemento
// MUY IMPORTANTE: esto debe ejecutarse antes de que cualquier otro event listener se añada
$(elemento).on("click", function(e) {
  if (e) {
    // prevenimos la propagación del resto de eventos click
    e.stopImmediatePropagation();

    // obtenemos una lista con las acciones asociadas al evento click
    var lectoresEvento = $._data(this, "events").click;

    // para cada elemento de la lista
    for (var x = 0; x < aClickListeners.length; x++) {
      // ejecutar la función
      aClickListeners[x].handler();
    }

    // invocar el evento personalizado afterclick
    $(this).trigger("afterclick")
  }
});

La idea sería ejecutar ese código en tu biblioteca, después de cargar jQuery y antes de cargar cualquier otro código. Más adelante se podrá asociar (o no) el evento afterclick a los diferentes elementos.

El evento personalizado se ejecutará siempre al final de todos los clicks; y si no hay ninguno, se ejecutará de todos modos (algo así como el finally en las excepciones).


Ventajas de este método:

  • Funciona :P
  • No necesitas saber cuántos controladores de eventos se han creado, ni su nombre. Todos aparecerán ordenados en la lista de $._data().

Inconvenientes de este método:

  • Sólo funciona dentro del universo de jQuery.
  • $._data(this, "events") no funciona en versiones anteriores a la 1.8, para esas habría que modificar un poco el código y usar element.data('events') (como se explica en esta pregunta del sitio en inglés).

Aquí dejo un ejemplo (se pueden ver los resultados en la consola):

// Asociamos un evento click a todos los elementos
$("*").on("click", function(e) {
  if (e) {
    e.stopImmediatePropagation();
    var lectoresClick = $._data(this, "events").click;
    for (var x = 0; x < lectoresClick.length; x++) {
      lectoresClick[x].handler();
    }
    $(this).trigger("afterclick");
  }
});

// definimos las acciones que se ejecutarán después de todas las acciones del evento click
$("button").on("afterclick", function() { 
  console.log("Ejecutados todos los eventos click de " + $(this).attr("id")); 
});

// asociamos diferentes acciones al evento click de los botones
$("#Boton1").on("click", function() { console.log("Primer evento botón 1"); });
$("#Boton2").on("click", function() { console.log("Primer (y único) evento botón 2"); });
$("#Boton1").on("click", function() { console.log("Segundo evento botón 1"); });
$("#Boton1").on("click", function() { console.log("Tercer evento botón 1"); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<button id="Boton1">Botón 1</button>
<button id="Boton2">Botón 2</button>
<button id="Boton3">Botón 3</button>

0

Puedes usar Promises:

<!DOCTYPE html>
<html>
    <head>
    </head>
    <body>
        <button id="button">Submit</button>
        <script src="http://code.jquery.com/jquery-2.1.4.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("#button").on("click", todo);

            });

            function todo() {
                Promise.all([primero(), segundo(), ultimo()]).then(function(values) {
                    alert("Terminado: " + values);
                });
            }

            function primero() {
                return new Promise(function(resolve, reject) {
                    console.log("Primero");
                    resolve(1);
                });

            }

            function segundo() {
                return new Promise(function(resolve, reject) {
                    setTimeout(resolve, 2000, 2);
                });
            }

            function ultimo() {
                return new Promise(function(resolve, reject) {
                    console.log("Ultimo");
                    resolve(3);
                });
            }
        </script>
    </body>
</html>

Estoy haciendo uso de Promise.all que espera el fin o rechazo de un Array de Promises.

Cada una de las funciones que se llaman dentro de la función todo está retornando una promesa:

return new Promise(function(resolve, reject) { ... });

La función segundo tarda mayor tiempo que las otras dos pero la función todo espera la finalización de todos ellos.

6
  • Eso solo funciona si yo controlo todo el código. Si otro código añada un controlador de evento, ese método no va a ayudarme saber si se termine, verdad?
    – Flimzy
    Commented el 3 ene. 2016 a las 15:20
  • @Flimzy ¿a qué te refieres con "otro código añada"?, ¿podrías poner un ejemplo en tu pregunta?
    – César
    Commented el 3 ene. 2016 a las 15:27
  • foo.js hace $(x).on('click', ...), y también bar.js hace $(x).on('click', ...). Eso es muy común si consideras delegación de eventos... y bibliotecas (y de hecho, estoy escribiendo una biblioteca, y los usuarios tienen que estar capaz añadir controladores de los eventos también. De hecho, eso eso todo el punto de mi pregunta: Quiero saber que los controladores de los usuarios ya se terminen).
    – Flimzy
    Commented el 3 ene. 2016 a las 15:29
  • He editado mi pregunta para ser más especifico con esos detalles.
    – Flimzy
    Commented el 3 ene. 2016 a las 15:32
  • @Flimzy entiendo, bueno en ese caso mi respuesta no te ayuda del todo, tendrías que saber cuales son todos esos controladores para agregarlos al array cuando llamas a Promise.all
    – César
    Commented el 3 ene. 2016 a las 15:37
-1

Usa Async

async.series([
  function(callback) {
    callback(null, 'uno');
  },
  function(callback) {
    callback(null, 'dos');
  },
  function(callback) {
    callback(null, 'ultimo');
  }
], function (err, result) {
  // ['uno', 'dos', 'ultimo']
});

Podrías poner todos los controladores en un array var cont = [controlardor1, controlador2...] y pasarlo como argumento a async.series(cont, cb)

1
  • Eso es casi gual que la otra respueta, pero no es respuesta a mi pregunta. Eso solo sirve si todo el código es el mío.
    – Flimzy
    Commented el 3 ene. 2016 a las 20:20

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.