miércoles, 24 de abril de 2013

JQuery: Evitar lanzamientos múltiples de eventos

Vuelvo a la carga con un poco más de Javascript, concretamente JQuery. Realizando un script muy sencillo para cargar por ajax elementos adicionales al realizar scroll, para hacer un efecto de scroll infinito, he topado con un problema inesperado: En cada scroll, se lanzaban varias veces el evento capturado, por lo tanto repetía varias veces el contenido.

Para evitar el lanzamiento de múltiples eventos solo tenemos que usar un timer:

 
<script>
     var timer = null;

     function doSomething() {
        ...
     }

     $(function () {
         $(window).scroll(function () {
            if (timer) clearTimeout(timer);
            timer = setTimeout(function () {
                doSomething()
            }, 100);
         });
     });
</script>

De esta forma evitamos que se lancen en paralelo varias veces el evento, sobretodo cuando intentamos cargar por ajax algún contenido adicional dado que necesita tiempo para cargar los datos.

2 comentarios:

  1. hola, esta bien el tuto, tengo un problema con jquery, resulta que cargo un listview con contenido traido desde ajax(json), cuando cliqueo el primer item de busqueda, obtengo el indice y traigo los datos relacionados con el item, luego los coloco en una div para imprimirla en pantalla y me redirigo a la pagina donde esta el contenido, la primera vez funiciona perfecto, pero la segunda vez parece que el evento click se duplicara y no muestra bien la informacion, luego triplica el evento y asi sucesivamente, agradeceria que me ayudara

    ResponderEliminar
  2. Hola Ricardo, la solución más sencilla para tu caso es que 'desbindees' los eventos click. Para ello utiliza simplente:

    $(selector).off('click')

    Hay una forma más elegante de hacer esto, luego si me acuerdo te la explico, pero esto te funciona seguro ;)

    ResponderEliminar