重复代码块问题

Question

我在页面上运行的 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。突然，齿轮元件增加了一倍。另一个屏幕挤压和放大和 BAM，现在有三个。这样做几次，它很快就会加起来。

我怎样才能阻止这种情况？

Answer 1

如果您在调整大小事件中挂钩任何代码，请确保您的代码不会再次调整窗口大小。否则，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

Answer 2

哈哈！过了一会儿，我决定暂时忽略其他人所说的一切（对不起），并尝试看看我自己是否能弄清楚，我做到了！

感谢 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();
});