Question

我有这个功能：

function loadCollapse() {
  function collapseDetail() {
    $(this).next().fadeToggle(500);
  }    

  //toggle the componenet with class summary  
  $("span.summary").unbind('click',collapseDetail);
  $("span.summary").click(collapseDetail);
}

此函数绑定到ajaxComplete()事件，也就是在所有ajax请求完成时执行。奇怪的是，解开不起作用。

只有在collapseDetail()之外定义/移动loadCollapse()时才有效。为什么呢？

每次函数get执行时，函数内部的函数是否真的重新定义了？

我是否需要担心会产生任何潜在的内存/性能问题？

Answer 1

每次调用该函数时，collapseDetail函数都将被重新定义，因此它将与您上次创建的函数不同。因为它是一个不同的函数，而不是你在第一次调用时绑定的函数，unbind将没有任何效果，因为这个新的collapseDetail函数从未绑定。

解决此问题的一种方法示例：

function generateLoadCollapse() {
    var collapseDetail = function() {
        $(this).next().fadeToggle(500);
    };

    var loadCollapse = function() {
        $("span.summary").unbind('click',collapseDetail);
        $("span.summary").click(collapseDetail);
    };

    return loadCollapse;
}

另一种方式可能是：

function generateLoadCollapse() {
    return (function() {
        this.collapseDetail = function() {
            $(this).next().fadeToggle(500);
        };

        $("span.summary").unbind('click',this.collapseDetail);
        $("span.summary").click(this.collapseDetail);
    })();
}

然后，您可以将此函数返回的值分配给您之前对loadCollapse所拥有的值：

loadCollapse = generateLoadCollapse();

JavaScript功能范围

1 个答案: