javascript - 调整浏览器大小时尝试关闭 requestAnimation 功能

Question

我有以下代码，我试图在运行窗口调整大小时关闭该功能，目前它只是继续在 window.resize 上运行。

function headerParallax(x) {
    if (x ==="true"){
        $(window).scroll(function() {
            // Store scrollTop in variable
            var scrollPos = $(window).scrollTop();
            // var viewportHeight = $(window).height();
            console.log(scrollPos + 'bgbottle1');

            var bouncePos = ((-1 * (scrollPos - 75) * 1.5) + scrollPos).toFixed(2);
            var bouncePos1 = ((-1 * (scrollPos - 150) * 1.25) + scrollPos).toFixed(2);

            $(".bottle1").css({ 'background-position': "right " + bouncePos + 'px'});

            if (scrollPos > 150){
                $(".bottle2").css({ 'background-position': "left " + bouncePos1 + 'px'});
            }
        });
    }else if(x === "false"){
        alert("no");
    }
}    

$(window).resize(function(){
    if ($(window).width() < 1200){
        window.requestAnimationFrame(headerParallax("false"));
    }
});

if ($(window).width() > 1200){
    window.requestAnimationFrame(headerParallax("true"));
}

Answer 1

你可以尝试这样的事情:

var _preflag = -1;
var _unbindScroll = function(){};

// it will be fired only once (when flag is changed)
function headerParallax(flag){
    if (flag === _preflag){
        return;
    }

    _preflag = flag;

    if (flag){
        // TODO adjust the UI for true
        window.requestAnimationFrame(theCalculatedValue);

        _unbindScroll(); // It's duplicate work to unbind scroll here, but there's no harm calling it :)
        $(window).on('scroll', _onscroll);

        // update the ubind scroll so that anyone can ubind it safely
        _unbindScroll = function(){
            $(window).off('scroll', _onscroll);
            _unbindScroll = function(){};
        };

    } else {
        // TODO adjust the UI for false
        window.requestAnimationFrame(theCalculatedValue);
        _unbindScroll(); // unbind scrolling, this is what you want, right?
    }

    function _onscroll(){
        // TODO
    }
}

function resize(){
    // this will be fired multipe times, need to check it in sub functions to take it once
    headerParallax($(window).width() < 1200);
}

$(window).resize(resize);
resize();