代码之家 › 专栏 › 技术社区 › Brandon Wang

重复代码块问题

jquery javascript

Brandon Wang · 技术社区 · 15 年前

我在一个页面上运行的jquery javascript文档中有以下代码( 这就是电流 ):

$(window).resize(function(){
    detectscreen();
});

function windowWidth() {
    if(!window.innerWidth) {
        // user is being a git, using ie
        return document.documentElement.clientWidth;
    } else {
        return window.innerWidth;
}}

gearsExists = false;

function detectscreen() {
    shouldExist = windowWidth() >= 1300;
    if (shouldExist != gearsExists) {
        if (shouldExist) {
                $('body').append('<div id="gearsfloat"><a href="#" id="clickGoTop"></a></div>');
                $('#clickGoTop').fadeTo(0,0);
                $('#clickGoTop').hover(function() {
                    $(this).stop().fadeTo(500,1);
                }, function() {
                    $(this).stop().fadeTo(500,0);
                });
        } else {
            $('#gearsfloat').remove();
            $('#clickGoTop').remove();
        }
        gearsExists = shouldExist;
    }
}

此代码来自我的 previous question 因为我认为它是相关的。

这里的问题是开头很好:显示出来了。但是,如果屏幕的大小调整到1300以下,它就会消失;仍然很好。

现在我又把窗户改大了1300。突然齿轮元件翻了一番。另一个屏幕上的水花,拉根和砰的一声,现在有三个。这样做几次,很快就会累积起来。

我怎样才能阻止这一切?

2 回复 | 直到 15 年前

SolutionYogi Eric Lippert 15 年前

如果在Resize事件中挂接任何代码,请确保代码不会再次调整窗口的大小。否则,Resize事件将再次触发,代码将进入无限循环。

此外,在您的代码中,您没有使用全局gearsexists变量。删除方法底部的“var”以使用全局变量。

function detectscreen() {

        // Your original code

        //var gearsExists = shouldExist; //This code will create new local variable. 
        gearsExists = shouldExist; 
    }
}

编辑:以下是我要做的:

//We will add only one variable to the global scope. 
var screenManager = function()
{
    var pub = {};

    var inResizeHandler = false;

    pub.getWindowWidth = function() 
                        { 
                            return window.innerWidth || document.documentElement.clientWidth;
                        };

    pub.manage = function()
                {
                    //if we are already in the resize handler, don't do anything.
                    if(inResizeHandler)
                        return;

                    inResizeHandler = true;

                    if(pub.getWindowWidth() < 1300)
                    {
                        $('#gearsfloat').remove();
                        //You don't have to remove clickGoTop because it is part of gearsfloat.
                        inResizeHandler = false;
                        return;
                    }

                    if($('#gearsfloat').length > 0)
                    {
                        inResizeHandler = false;
                        return false;
                    }

                    $('body').append('<div id="gearsfloat"><a href="#" id="clickGoTop"></a></div>');
                    $('#clickGoTop').fadeTo(0,0);
                    $('#clickGoTop').hover(                     
                                function() {$(this).stop().fadeTo(500,1);}, 
                                function() {$(this).stop().fadeTo(500,0);
                        });

                    inResizeHandler = false;
                };

    pub.init = function()
                {
                    $(window).resize(pub.manage);
                };

    return pub;
}();


$(document).ready( function() { screenManager.init(); } );

编辑:

最终工作版本:

http://jsbin.com/ufipu

代码:

http://jsbin.com/ufipu/edit

Brandon Wang 15 年前

哈哈!过了一会儿,我决定暂时不理会别人说的每一句话(对不起),试着看看我能不能自己弄明白,我做到了!

多亏了SolutionYogi的所有帮助,但他给我的代码超出了我的专业知识范围;无法调试。我的解决方案不如他的(如果你能帮助优化,请这样做),但它可以工作:

function WinWidth() {
    // check width of content
    if(!window.innerWidth) {
        // you git, how dare you use ie
        return document.documentElement.clientWidth;
    } else {
        return window.innerWidth;
    }
};

function gearsAction() {
    if(WinWidth() >= 1300) {
        $('body').append(
            '<div id="gearsfloat"><a href="#" id="clickGoTop"></a></div>');

        $('#clickGoTop').fadeTo(0,0);

        $('#clickGoTop').hover(
            function() {$(this).stop().fadeTo(500,1);}, 
            function() {$(this).stop().fadeTo(500,0);});

    };
};

$(document).ready(function() {
    gearsAction();
});

$(window).resize(function() {
    $('#gearsfloat').remove();          
    gearsAction();
});