将参数传递到回调函数中

Passing Parameters into a Callback Function

本文关键字：函数 回调 参数传递      更新时间：2023-09-26

我有一个函数，它监听屏幕上的点击并触发回调。它是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变量。

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
});

传递给bodyClickListener的函数是一个闭包。您可以简单地在该函数中引用"popup"，而不会有任何问题。您不必创建新的变量。

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

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

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

相关文章：