Javascript-将param函数传递给异步onchange事件

Question

晚上好，我在Javascript中构造表单时遇到了一个问题。为了避免代码的重复，我想使用相同的功能：

function addCheckBoxItem(p, name, value) {
// add checkbox
var newCheckbox = document.createElement("input");
newCheckbox.type = "checkbox";
newCheckbox.setAttribute("value", p);
newCheckbox.setAttribute("id", p);
newCheckbox.setAttribute("name", name);
newCheckbox.onchange = function(){ 
var cbs = document.getElementsByName(name);
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
this.checked = true;
// define the peer selected as choice
value = this.value;
// TODO: MY PROBLEM IS HERE
};
form.appendChild(newCheckbox);

// add label to checkbox
var label = document.createElement('label');
label.setAttribute("name", name);
label.htmlFor = p;
label.appendChild(document.createTextNode(p));
form.appendChild(label);
// add br tag to checkbox 
var br = document.createElement("br")
br.setAttribute("name", name);
form.appendChild(br);
}

我调用我的函数内部循环

for (i = 0; i < array.length; i++) { 
addCheckBoxItem(array[i].key, nameItemCheckbox, peer_choice);
}

我知道value = this.value是不可能的，因为onchange事件是异步的，但我想检索此事件的值并将其与我的参数相关联。我发现对这个问题有不同的反应。其中一个问题是：为什么在函数内部修改变量后，变量保持不变？-异步代码参考我已经理解了基本概念，但没有一个示例与我的问题相关。有人能帮我吗？

编辑-解决方案

感谢@Tibrogargan，我以这种方式修改了我的功能：

for (i = 0; i < array.length; i++) {
addCheckBoxItem(form, array[i].key, form_peer_available_class, peer_choice, (value) => peer_choice = value);
}

和

function addCheckBoxItem(p, name, value, callback) {
// add checkbox
var newCheckbox = document.createElement("input");
newCheckbox.type = "checkbox";
newCheckbox.setAttribute("value", p);
newCheckbox.setAttribute("id", p);
newCheckbox.setAttribute("name", name);
newCheckbox.onchange = function(){ 
var cbs = document.getElementsByName(name);
for (var i = 0; i < cbs.length; i++) {
cbs[i].checked = false;
}
this.checked = true;
// define the peer selected as choice
callback(this.value);
};
form.appendChild(newCheckbox);

// add label to checkbox
var label = document.createElement('label');
label.setAttribute("name", name);
label.htmlFor = p;
label.appendChild(document.createTextNode(p));
form.appendChild(label);
// add br tag to checkbox 
var br = document.createElement("br")
br.setAttribute("name", name);
form.appendChild(br);
}

Answer 1

像一样将回调传递到addCheckBoxItem

// accumulator
var data = {}
// callback
var storeData = (name, value, p) => data[name] = value;
// callback as third argument
addCheckBoxItem('data1', 'checkbox1', storeData);
addCheckBoxItem('data2', 'checkbox2', storeData);
addCheckBoxItem('data3', 'checkbox3', storeData);

查看此处的完整示例http://jsfiddle.net/gtqnc109/9/