jQuery scroll () detecta cuando el usuario deja de desplazarse

Intenta interpretar el código correctamente previamente a aplicarlo a tu proyecto si tdeseas aportar algo puedes comentarlo.

Solución:

$(window).scroll(function() 
    clearTimeout($.data(this, 'scrollTimer'));
    $.data(this, 'scrollTimer', setTimeout(function() 
        // do something
        console.log("Haven't scrolled in 250ms!");
    , 250));
);

Actualizar

escribí un extensión para mejorar el valor predeterminado de jQuery on-controlador de eventos. Adjunta una función de controlador de eventos para uno o más eventos a los elementos seleccionados y llama a la función de controlador si el evento no se activó durante un intervalo determinado. Esto es útil si desea activar una devolución de llamada solo después de un retraso, como el evento de cambio de tamaño, o algo así.

¡Es importante consultar el repositorio de github para ver si hay actualizaciones!

https://github.com/yckart/jquery.unevent.js

;(function ($) 
    var on = $.fn.on, timer;
    $.fn.on = function () 
        var args = Array.apply(null, arguments);
        var last = args[args.length - 1];

        if (isNaN(last) ;
(this.jQuery || this.Zepto));

Úsalo como cualquier otro on o bind-controlador de eventos, excepto que puede pasar un parámetro adicional como último:

$(window).on('scroll', function(e) 
    console.log(e.type + '-event was 250ms not triggered');
, 250);

http://yckart.github.com/jquery.unevent.js/

(esta demostración utiliza resize en lugar de scroll¡¿pero a quién le importa?!)

Usando jQuery acelerador / antirrebote

jQuery debounce es bueno para problemas como este. jsFidlle

$(window).scroll($.debounce( 250, true, function()
    $('#scrollMsg').html('SCROLLING!');
));
$(window).scroll($.debounce( 250, function()
    $('#scrollMsg').html('DONE!');
));

El segundo parámetro es el indicador “at_begin”. Aquí he mostrado cómo ejecutar el código tanto en “inicio de desplazamiento” como en “finalización de desplazamiento”.

Usando Lodash

Como sugirió Barry P, jsFiddle, subrayado o lodash también tienen un rebote, cada uno con API ligeramente diferentes.

$(window).scroll(_.debounce(function()
    $('#scrollMsg').html('SCROLLING!');
, 150,  'leading': true, 'trailing': false ));

$(window).scroll(_.debounce(function()
    $('#scrollMsg').html('STOPPED!');
, 150));

Rob W sugirió que revisara otra publicación aquí en la pila que era esencialmente una publicación similar a la original. Al leer eso, encontré un enlace a un sitio:

http://james.padolsey.com/javascript/special-scroll-events-for-jquery/

En realidad, esto terminó ayudando a resolver mi problema muy bien después de un pequeño ajuste para mis propias necesidades, pero sobre todo ayudó a eliminar muchas de las tonterías y me ahorró alrededor de 4 horas de resolverlo por mi cuenta.

Al ver que esta publicación parece tener algo de mérito, pensé que volvería y proporcionaría el código que se encuentra originalmente en el enlace mencionado, en caso de que el autor decidiera tomar una dirección diferente con el sitio y terminara eliminando el enlace.

(function()

    var special = jQuery.event.special,
        uid1 = 'D' + (+new Date()),
        uid2 = 'D' + (+new Date() + 1);

    special.scrollstart = 
        setup: function() 

            var timer,
                handler =  function(evt) 

                    var _self = this,
                        _args = arguments;

                    if (timer) 
                        clearTimeout(timer);
                     else 
                        evt.type = 'scrollstart';
                        jQuery.event.handle.apply(_self, _args);
                    

                    timer = setTimeout( function()
                        timer = null;
                    , special.scrollstop.latency);

                ;

            jQuery(this).bind('scroll', handler).data(uid1, handler);

        ,
        teardown: function()
            jQuery(this).unbind( 'scroll', jQuery(this).data(uid1) );
        
    ;

    special.scrollstop = 
        latency: 300,
        setup: function() 

            var timer,
                    handler = function(evt) 

                    var _self = this,
                        _args = arguments;

                    if (timer) 
                        clearTimeout(timer);
                    

                    timer = setTimeout( function()

                        timer = null;
                        evt.type = 'scrollstop';
                        jQuery.event.handle.apply(_self, _args);

                    , special.scrollstop.latency);

                ;

            jQuery(this).bind('scroll', handler).data(uid2, handler);

        ,
        teardown: function() 
            jQuery(this).unbind( 'scroll', jQuery(this).data(uid2) );
        
    ;

)();

Reseñas y calificaciones del artículo

Puedes añadir valor a nuestra información asistiendo con tu veteranía en las ilustraciones.

---

---

Utiliza Nuestro Buscador