使用回调创建动态 JSON 数组（内部闭包问题）答案

【问题标题】：Creating a Dynamic JSON array with callbacks (Inner Closure Issue)使用回调创建动态 JSON 数组（内部闭包问题）
【发布时间】：2013-09-17 17:34:38
【问题描述】：

很难给这个东西取个名字。我正在为 jQuery 使用 contextMenu 插件。

http://joewalnes.com/2011/07/22/a-simple-good-looking-context-menu-for-jquery/

它可以使用一组项目，因此我可以根据我之前建立的一个名为“包”的 JSON 对象动态创建菜单，它只不过是一个包含 id 和标题的 JSON 对象数组。例如：

var packages = [{id:1,title:"One"},{id:2,title"Two"}];

正如您从我添加的链接中的示例中可能看出的那样，“项目”至少包含一个标签和一个回调函数（在选择项目时执行）。所以我的第一个想法是这样做：

var itemsArr = new Array();
for(var i=0; i<packages.length; i++)
{
    itemsArr.push({label:packages[i].title, action:function(){myClickFunction(packages[i].id);}});
}
$("#myMenuThingie").contextPopup({title:"My Popup", items:itemsArr});

现在，我已经验证我可以传递一个数组来使这个菜单正常工作。我认为，问题在于内部封闭问题。因为 myClickFunction 总是获取最后一个 id 的值，而不管点击了什么。

我在这里找到了一篇关于“立即调用函数表达式”的文章：http://benalman.com/news/2010/11/immediately-invoked-function-expression/，因此修改了：

for(var i=0; i<packages.length; i++)
{
    itemsArr.push({label:packages[i].title, action:(function(tempId){myClickFunction(tempId);})(packages[i].id)});
}

但是，该方法也不会真正起作用，因为它会立即调用这些函数，而不是在单击时。

我知道我可以尝试使用 jQuery 来查找由下拉菜单生成的所有跨度并以这种方式应用点击事件，我只是想知道是否有一种方法可以使用引用正确的回调来创建这个对象数组ID。如果其他 contextMenu 插件允许我以类似的方式动态应用项目，我也会采纳建议。

有什么想法吗？

【问题讨论】：

标签： javascript callback closures

【解决方案1】：

我可能会创建一个独立的函数来将包提供给数组。像这样的：

var itemsArr = new Array();
function addToArray(package) {
    itemsArr.push({label:package.title, action:function(){myClickFunction(package.id);}});
} 
for(var i=0; i<packages.length; i++)
{
    addToArray(packages[i]);
}
$("#myMenuThingie").contextPopup({title:"My Popup", items:itemsArr});

【讨论】：