Jquery：启用/禁用功能？ （绑定/取消绑定？）最好的方法是什么？

Question

我有一个函数 Stickyhead() ，它基本上将 h2 固定在页面顶部，当您向下滚动页面时，当您到达新的 h2 时，h2 中的文本会发生变化，所以它就像 iphone 的电话簿/联系人或安卓手机。当您滚动浏览名称以 A 开头的联系人时，带有字母 A 的标题将固定在顶部，然后当您到达 B 名称时，会将页面顶部标题中的文本更改为 B。我想在 .switch 标签选择了类时启用/禁用此功能。下面的代码工作得很好，但我想知道这是否是一个不好的方法？我是否多次重新加载我的函数？有更好的方法吗？

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

但请记住，在不需要时不解除绑定处理程序会浪费内存。
绑定/解除绑定虽然丑陋，但在资源稀缺时是合理的。

另外，当元素被删除并且处理程序保持绑定状态时...... Viola！内存泄漏的完美案例。可能看起来无关紧要，但我觉得我应该提到这一点，以防万一您正在为移动平台编写此内容。

Answer 2

我在可视化您的代码方面略有困难，但您不太可能需要不断地绑定和解除绑定。您的滚动处理程序中应该有一个布尔值，它有条件地运行处理程序中的代码：

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

Answer 3

保持函数绑定但使用状态变量来确定 Stickyhead() 是否实际执行任何操作可能更有效。

例如

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

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

，然后不要取消绑定函数，只需使用 stickyheadActive=false;