Jquery: activer/désactiver une fonction? (lier/délier?) le meilleur moyen de le faire?

Question

J'ai une fonction stickyhead() qui maintient essentiellement un h2 fixé en haut de la page, lorsque vous faites défiler la page, le texte du h2 change lorsque vous atteignez un nouveau h2, donc c'est comme le répertoire/les contacts d'un iphone ou téléphone android. Un en-tête avec la lettre A restera collé en haut lorsque vous faites défiler vos contacts dont le nom commence par A, puis il change le texte de l'en-tête en haut de la page en B lorsque vous atteignez les noms B. Je veux activer/désactiver ceci quand le label .switch a la classe sélectionnée. Le code ci-dessous fonctionne très bien, mais je me demande si c'est une mauvaise façon de le faire? Suis-je en train de recharger ma fonction plusieurs fois? Y a-t-il une meilleure façon de le faire?

$('.switch').click(function() { 
if ($('.switch label').hasClass('selected')) { 
    stickyhead(); 
} else { 
    $(window).unbind('scroll'); 
} 
}); 

Answer 1

//Assuming I've understood the scenario correctly, wouldn't this work. 
$('.switch').delegate("label.selected", "click", function() { 
    if (stickyheadActive){ 
     //do your stuff here 
    } 
    else{ 
     return; 
    } 
}); 

Mais gardez à l'esprit, et non des gestionnaires déliaison quand on pouvait s'y attendre pas nécessaire est une perte de mémoire. La liaison/dissociation est laide mais justifiable lorsque les ressources sont rares.

De même, lorsque les éléments sont retirés et que les manipulateurs restent attachés ... Viola! Parfait pour les fuites de mémoire. Cela pourrait sembler hors de propos, mais je pensais juste que je devrais en parler, juste au cas où vous écrivez ceci pour des plateformes mobiles.

Answer 2

Il peut être plus efficace de maintenir la fonction binded mais d'utiliser une variable d'état pour déterminer si stickyhead() ne fait quoi que ce soit ou non.

par exemple

function stickyhead(){ 
    if (!stickyheadActive) return; //Guard clause to prevent action 

    //...Your current code...// 
} 

Alors plutôt que déliant la fonction juste utiliser stickyheadActive=false;

Answer 3

Je me bats un peu pour visualiser votre code, mais il est peu probable que vous devez lier et délier constamment. Vous devriez avoir un booléen dans votre gestionnaire de défilement qui fonctionne sous condition le code dans le gestionnaire:

var doStickyHead = true; 
$(window).scroll(function(){ 
    if (doStickyHead) { 
     // do your code 
    } 
}); 
$('.switch').click(function(){ 
    doStickyHead = !doStickyHead; // invert the value of doStickyHead 
});