Question

我创建了这段代码来提高我的网页性能。如果autoplay.v.mystart为真，则不会播放2张幻灯片的滑动和动画，我对其进行了调整。我的目的是在用户滚动时停止动画并在用户停止滚动时重新激活它，我认为它会减少网页加载，使网页滚动更顺畅，因为我听人们说停止未使用的动画或隐藏未使用的内容。但是，我看到它没有变得更顺畅，但有点迟钝。是否使用滚动事件监听器和定时器/ cleartimeout也将占用大量资源？什么是实现我的目标，减少我的网页负载的最佳方法？我在想是否应该删除此代码？这将是一种浪费，我无法决定

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

首先，这是一个jQuery插件，提供基于this的'scrollstart'和'scrollstop'事件，它是为早期版本的jQuery编写的，需要进行现代化。

(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);

此版本：

用.bind()和.unbind()取代.on()和.off()，以及相关的简化。
允许将延迟指定为自执行函数包装器的参数。

通过'scrollstart'和'scrollstop'事件检测，用于启动和停止动画的应用程序片段可以像这样简单：

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

其中anim()和stopAnim()是用于启动和停止动画的函数，allowAnim是外部作用域中的布尔变量。

您可能想要调整延迟。我发现300是最低可接受值，并且非常敏感。较大值越高，响应越少，但会更好地阻止动画在中间滚动时重新启动。

<强> DEMO

此操作实际上会增加或减少网页性能？

1 个答案: