Question

我有以下功能可以监视滚动位置和触发功能（在Iscroll4中）。

bgFadeToggle（）函数基本上触发一个显示/隐藏菜单的功能。它包含一个存储向上/向下状态的变量，以便在滚动期间仅触发一次相同的功能。

我遇到的问题是，如果用户合理地快速上下滚动，这些功能会不断触发 - 这会使喜剧在屏幕上产生跳舞效果！任何人都可以推荐一种方法，在一定的时间内将忽略重复的调用，以避免这个问题吗？

 onScrollMove: function() {
           var thisScrol =  myScroll.getScrollY()
           if (thisScrol < -80 ){
                bgfadeToggle('on');
            }
            if (thisScrol > -80){
               bgfadeToggle('off');
            }
},

bfFadeToggle代码 -

    function bgfadeToggle(which){
if (which == "on" && first == "yes"){
    //alert('on yes') ;alert(first)
    setTimeout(function() {first="no";$('#wrapper').addClass('hov');  }, 10)

                $('.appearLate').fadeIn('500');

                $('.footer').animate({
                    bottom: [ "-40", "swing" ],
                    opacity: "0"
                  }, 100, "linear");


                $( ".appearLate" ).animate({
                    top: [ "30", "swing" ],
                    opacity: "1"
                  }, 1000, "linear");

}

if (which == "off" && first== "no"){
    //alert('off no') ;alert(first)
    setTimeout(function() {first="yes";$('#wrapper').removeClass('hov'); }, 10)

            $( ".appearLate" ).animate({
                    top: [ "-55", "swing" ],

                  }, 1300, "linear");

            $('.footer').animate({
                    bottom: [ "0", "swing" ],
                    opacity: "1"
                  }, 1000, "linear");

}

}

Answer 1

您可以保留布尔值animationDone。

在动画之前将其设置为false，然后为true。当布尔值为false时，不要做其他动画。

Answer 2

你想要锁定函数调用，锁应该是一个全局变量并声明为false：

onScrollMove: function() {
       var thisScrol =  myScroll.getScrollY()
       if (thisScrol < -80 && !locked){
            locked = true;
            bgfadeToggle('on');
            locked = false;
        }
        if (thisScrol > -80 && !locked){
           locked = true;
           bgfadeToggle('off');
           locked = false;
        }

}，

Answer 3

您可以使用这样的延迟调用模式：

onScrollMove: function () {
    var thisScrol = myScroll.getScrollY();
    scrollCallback.invoke(thisScrol < -80);
};

var scrollCallback = function () {
    var _timeoutId,
        _delayToCall = 500;
    return {
        invoke: function (lessThan) {
            window.clearTimeout(_timeoutId);
            _timeoutId = window.setTimeout(function () {
                bgfadeToggle(lessThan ? 'on' : 'off');
            }, _delayToCall);
        }
    };
}();

在重置之前将函数限制为触发一次

3 个答案: