Question

I created this piece of code to increase my webpage performance.
If autoplay.v.mystart is true, the sliding and animations of 2 slideshows will not be played,I made condition on it. My aim is to stop the animations while user is scrolling and reactivate it while user stopped scrolling, I think it will reduce a webpage load, to make a webpage scroll smoother, as I listened to people say stop unused animations or hide things that’s unused. However, I see it didn’t go smoother, but a bit more laggy. Is it using scroll event listener and timer/cleartimeout will take up a lot of resources too? What is the best way to accomplish my aim , to reduce my webpage load? I am thinking should I remove this code?That will be a waste,I can’t decide

var saviour = {
    '$mywrapper' : $('#wrapper'),
    'mychecked':false,
    run : function(){
        var wrapper_timer;
        saviour.$mywrapper.scroll(function(){
            if(saviour.mychecked==false){
                saviour.mychecked = true;
                autoplay.v.mystart = false;
                clearTimeout(wrapper_timer);
                setTimeout(function(){saviour.mychecked=false},1000);
                wrapper_timer = setTimeout(function(){
                autoplay.v.mystart = true;
                console.log('autoplay restart')
                },4000);
                console.log('check');
            }
        });
    }
}
saviour.run();

Answer 1

First, here’s a jQuery addon that provides ‘scrollstart’ and ‘scrollstop’ events, based on this, which was written for an early version of jQuery and needed to be modernized.

(function($, latency) {
    var special = $.event.special;
    special.scrollstart = {
        setup: function() {
            var timer;
            function handler(evt) {
                if (timer) {
                    clearTimeout(timer);
                } else {
                    evt.type = 'scrollstart';
                    $.event.handle.apply(this, arguments);
                }
                timer = setTimeout(function() {
                    timer = null;
                }, latency);
            };
            $(this).on('scroll.start', handler);
        },
        teardown: function() {
            $(this).off('scroll.start');
        }
    };
    special.scrollstop = {
        setup: function() {
            var timer;
            function handler(evt) {
                var _self = this,
                    _args = arguments;
                if (timer) {
                    clearTimeout(timer);
                }
                timer = setTimeout(function() {
                    timer = null;
                    evt.type = 'scrollstop';
                    $.event.handle.apply(_self, _args);
                }, latency);
            };
            $(this).on('scroll.stop', handler);
        },
        teardown: function() {
            $(this).off('scroll.stop');
        }
    };
})(jQuery, 300);

This version :

• Replaces .bind() and .unbind() with .on() and .off(), plus associated simplification.
• Allows the latency to be specified as a parameter to the self-executing function wrapper.

With ‘scrollstart’ and ‘scrollstop’ event detection in place, the application snippet for starting and stopping the animation can be as simple as this :

$(window).on ('scrollstart', function(e) {
    allowAnim = false;    
    stopAnim();
}).on ('scrollstop', function(e) {
    allowAnim = true;
    anim();
}).trigger('scrollstop');

where anim() and stopAnim() are your functions for starting and stopping animation(s) and allowAnim is a boolean var in an outer scope.

You may want to adjust the latency. I found 300 to be about the minimum acceptable value, and very responsive. Larger A higher value will be less responsive but will better prevent the animation from restarting in mid-scroll.

DEMO