繰り返しコードブロックの問題

Question

、私は（これは CURRENT IS ）ページ上で実行されている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には3つあります。これを数回行い、それがすぐに加算されます。

どうすればいいですか？

Answer 1

ハハ！しばらくして、私は他の誰もが言ったことをすべて無視して（申し訳ありません）、私がそれを理解できるかどうかを試してみました。

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

Answer 2

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

EDIT：

最終作業バージョン：

http://jsbin.com/ufipu

コード：

http://jsbin.com/ufipu/edit