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.突然，齿轮元件加倍。另一个屏幕挤压和bign和BAM，现在有三个。多次这样做，很快就会加起来。

我怎么能阻止这个？

Answer 1

如果您在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

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

重复代码块问题

2 个答案: