script Redimensionner ajoute objet, fait encore et encore

Question

Je le code suivant dans un fichier JavaScript:

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

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

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

    function detectscreen() { 
     if (windowWidth()>1280) { 
      $('body').append('<div id="gearsfloat"></div>'); 
    }} 

Fondamentalement, ce qu'il fait est ajouter un objet à la fin du document si la largeur est moins de 1280 pixels, cependant, ceci est ajouté à chaque fois que la page est redimensionnée.

Je ne pense pas que je puisse utiliser la fonction once car elle ne l'exécuterait qu'une seule fois et la prochaine fois qu'elle est redimensionnée, elle est morte. Tout ce que je peux faire?

 

NOTE: Je, en fait, ne le veux à vérifier sur le redimensionnement de la page, mais l'effet est que cela se produit encore et encore.

if (windowWidth()>1280 && !$('gearsfloat')) { 
    $('body').append('<div id="gearsfloat"></div>'); 
} 

ci-dessus (par Jason) fonctionne ne fait pas travail, mais il ne supprimera pas quand il obtient moins de 1280. Est-ce que je peux faire?

Answer 1

Notez si l'élément existe ou non et ajoutez/supprimez-le lorsque la condition change. De cette façon, vous ne l'ajouter une fois, il sera supprimé quand il ne devrait pas être là, et vous ne faites pas unneccesary ajout ou la suppression:

var gearsExists = false; 

function detectscreen() { 
    var shouldExist = windowWidth() > 1280; 
    if (shouldExist != gearsExists) { 
     if (shouldExist) { 
     $('body').append('<div id="gearsfloat"></div>'); 
     } else { 
     $('#gearsfloat').remove(); 
     } 
     gearsExists = shouldExist; 
    } 
} 

Answer 2

if (windowWidth()>1280 && !$('gearsfloat')) { 
    $('body').append('<div id="gearsfloat"></div>'); 
} 

Vérifiez si l'élément existe déjà en premier?

Answer 3

Si vous ne voulez pas que la fonction soit appelée lorsque la fenêtre est redimensionnée, alors pourquoi liez-vous la fonction de redimensionnement?

la fonction de document prêt ne sera jamais appelée avant la fonction de redimensionnement, de sorte que votre élément sera garanti?