关联函数作为参数传递给一个数字

Question

我正在尝试在 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
}

Answer 1

你可以写一个函数，returns一个类似

的函数

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

Answer 2

活动方：

这里因为 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); 
    }

}

关联函数作为参数传递给一个数字

Associating function passed as argument with a number

javascript

function

onchange