0

我有以下监控滚动位置和触发功能的功能（在 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");

}

}
4

3 回答 3

1

您需要在函数调用周围加一个锁，锁应该是一个全局变量并声明为 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;
        }

},

于 2013-08-09T13:52:09.557 回答
1

你可以保留一个布尔值animationDone。

在动画之前将其设置为 false，然后设置为 true。并且当布尔值为false.

于 2013-08-09T13:43:38.377 回答
0

您可以使用这样的后期调用模式：

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);
        }
    };
}();
于 2013-08-09T13:54:22.773 回答