将作为参数传递的函数与数字相关联答案

【问题标题】：Associating function passed as argument with a number将作为参数传递的函数与数字相关联
【发布时间】：2017-06-13 07:45:57
【问题描述】：

我正在尝试在 Javascript 中使用以下代码。我想将函数 rulefunc() 多次传递给 onChange() 函数。我希望能够在调用时从函数内部访问 i。我该怎么做？

var gui = new DAT.GUI();

for   for (var i=0; i<5; i++) {

  // want to associate ruleFunc with i
  gui.add(lsys, 'grammarString').onChange(ruleFunc);

}

function ruleFunc(newVal) {
  ...
  // access i here
}

【问题讨论】：

检查我的回答是否有帮助

标签： javascript function onchange

【解决方案1】：

在活动方面：

这里因为 for 循环是同步的，所以使用了 IIFE，以便传递 i 的正确值 IIFE 和 onchange 事件进行闭包，使 i 的正确值被传递在争论中

事件回调端

使用闭包以便返回的函数可以访问参数的值

var gui = new DAT.GUI();

for (var i=0; i<5; i++) {
     // want to associate ruleFunc with i
    (function(a){ //making an IIFE to make sure right value of i is passed to the function
        f1.add(lsys, 'grammarString').onChange(ruleFunc(a));
    })(i);
}

function ruleFunc(newVal) {
    return function(){ 
        //making a closure which will have access to the argument passed to the outer function
        console.log(newVal); 
    }

}

【讨论】：

【解决方案2】：

你可以写一个函数，返回一个类似的函数

function ruleFunc(i) {

  return function(newVal){
     // ... here use your newVal and i
  }

}

并像使用一样

f1.add(lsys, 'grammarString').onChange(ruleFunc(i));

您调用从外部作用域获取i 的函数，然后返回的函数获取'onChange' 事件的newVal。请注意，我正在调用函数ruleFunc 并传递一个参数i。在函数内部，您现在可以使用您的 i 变量和 newVal。

它是如何工作的示例。在这里，我使用适当的 i 值将函数添加到数组中。之后，当我执行每个函数时，它正确地知道 i 在创建时使用了什么。它被称为closure。

var functions = [];

function ruleFunc(newVal) {
  return function (){
    console.log(newVal);
  };
}

for(var i = 0; i < 5; i++) {
  functions.push(ruleFunc(i));
}

for(var i = 0; i < functions.length; i++) {
  functions[i]();
}

【讨论】：

但是不需要newVal来访问gui中已经改变的值吗？
@user2260199 抱歉。已编辑
在推送到函数数组时使用 IIFE 不是更好，以便在那时和那里传递正确的值，而不是再次迭代它？ @SurenSrapyan
@RahulArora 有什么不同吗？这也是一个解决方案。
@SurenSrapyan：是的，这样你就可以再次保存 for 循环。