将参数传递给回调函数

Question

我有一个监听屏幕上的点击并触发回调的函数。 它是Helper对象的一部分（这就是为什么在我的示例代码中以术语Helper开头的原因。但这无关紧要。

var Helper = { 
    bodyClickListener: function(fn) {
        var window = document.getElementsByTagName('body')[0];
        window.click();
        CORE.dom.on(window, 'click', function(event) {
            CORE.dom.off(window, 'click');
            fn(event);
        });
    }
}

我需要能够使用先前设置的参数将一个函数传递给该函数。

function someFunction() {    
    var popup = document.getElementById('tagResultsPopup');
    Helper.bodyClickListener(function(popup) {
        return function(event) {
            event.stopPropagation();
            removePopup(popup);
        };              
    }(document.getElementById('tagResultsPopup')));

    function removePopup(element) {
        if(element) {
            element.parentNode.removeChild(element);
        }
    };
}

上面的代码有效，但是您会注意到我必须在回调函数中设置popup变量。 它已经在上面设置了。 如何将对较早变量的引用传递给回调函数。

Answer 1

如果我正确理解了您的问题，则无需做太多事情。 您可以只使用在外部定义的popup变量。

var popup = document.getElementById('tagResultsPopup');
Helper.bodyClickListener(function(event) {
    event.stopPropagation();
    //Don't set it  
    //var popup = document.getElementById('tagResultsPopup');
    removePopup(popup);//popup will refer to the correct variable
});

Answer 2

您传递给bodyClickListener的函数是一个闭包。 您可以简单地在该函数内引用“弹出窗口”，而不会出现任何问题。 您不必创建新变量。

Answer 3

答案是通过这种方式使用闭包：

Helper.bodyClickListener(function(popup) {
    return function(event) {
        event.stopPropagation();
        removePopup(popup);
    };              
}(document.getElementById('tagResultsPopup')));

这样，回调函数就可以访问传递给参数函数的变量。 所以在这里，返回实际上是我作为回调传递的函数。