problème bloc de code Cyclique

Question

Je le code suivant dans un document JavaScript jQuery en cours d'exécution sur une page (CECI EST COURANT):

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

Ce code est de mon previous question, ramifié ici simplement parce que je pense qu'il est lié.

Le problème ici est que le début est bien: il est affiché. Toutefois, si l'écran est redimensionné à moins de 1300, il disparaît; encore bon.

Maintenant, je fais à nouveau la fenêtre plus grande que 1300. Soudain, l'élément d'engrenage est doublé. Un autre écran squish et largen et BAM, il y en a trois maintenant. Faites ceci plusieurs fois et cela s'additionne rapidement.

Comment puis-je arrêter ceci?

Answer 1

Haha! Après un moment, j'ai décidé d'ignorer tout ce que disaient tous les autres pendant un moment (désolé) et d'essayer de voir si je pouvais le comprendre moi-même, et c'est ce que j'ai fait!

Merci à SolutionYogi pour toute l'aide, mais le code qu'il m'a donné était hors de mon expertise; il était impossible de déboguer. Ma solution n'est pas aussi belle que la sienne (si vous pouvez aider à optimiser, s'il vous plaît faire), mais cela fonctionne:

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

Si vous connectez du code à un événement de redimensionnement, assurez-vous que votre code ne redimensionne pas la fenêtre. Sinon, l'événement resize se déclenchera à nouveau et votre code ira en boucle infinie.

De même, dans votre code, vous n'utilisez pas la variable globale gearsExists. Supprimez le 'var' en bas de la méthode pour utiliser la variable globale.

function detectscreen() { 

     // Your original code 

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

EDIT: Voici ce que je ferais:

//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:

version finale de travail:

http://jsbin.com/ufipu

code:

http://jsbin.com/ufipu/edit