在 for 循环中创建按钮，每个按钮在 p5 中具有不同的 mousePressed 函数

Question

我想要四个按钮。每个按钮都有一个名称和一个值。当按下每个按钮时，我想执行一个将按钮值作为参数的函数。

我想调用的函数在这里并没有真正导入，但是可以说：

 function fun(value) {
     console.log(value)
}

我使用这段代码来完成这个工作。

  //   // create 4 buttons
  createButton('fabrics', 'fabrics')
    .position(50, 50 + 25 * 1)
    .mousePressed(function() {
      fun('fabrics');
    })

  createButton('leather', 'leather')
    .position(50, 50 + 25 * 2)
    .mousePressed(function() {
      fun('leather');
    })

  createButton('wood', 'wood')
    .position(50, 50 + 25 * 3)
    .mousePressed(function() {
      fun('wood');
    })

  createButton('metal', 'metal')
    .position(50, 50 + 25 * 4)
    .mousePressed(function() {
      fun('metal');
    })

以这种方式而不使用 for 循环似乎绝对愚蠢。我在 for 循环中尝试过：

  //   // create 4 buttons
  names = ['fabric', 'leather', 'wood', 'metal'];
  for (let i = 0; i < 4; i++) {
    name = names[i]
    createButton(name, name)
      .position(50, fabric[0].height + 25 * (i + 1))
      .mousePressed(function() {fun(name);})
  }

这会在所需位置创建 4 个按钮，但是 mousePressed 会以 metal 作为参数触发 fun 函数。换句话说，虽然 position 像我预期的那样循环，但每个按钮的 mousePressed 都会更新到每次迭代的最新 fun(name)。

在 p5 中执行此操作的更好方法是什么？

Answer 1

要为每个按钮提供自己的鼠标按下功能，您需要将该功能封装在一个闭包中。尝试这样的事情：

function setup() {
  createCanvas(400, 400);
  background(220);
 var names = ['fabric', 'leather', 'wood', 'metal'];
  for (let i = 0; i < 4; i++) {
    name = names[i]
    createButton(name, name)
      .position(50, 125 + 25 * (i + 1))
      .mousePressed(createMousePressedFunction(name))
  }
}

function createMousePressedFunction(name){
return function() {fun(name);}
}

 function fun(value) {
     console.log(value)
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>

在 for 循环中创建按钮，每个按钮在 p5 中具有不同的 mousePressed 函数

Creating buttons in a for-loop, each with a different mousePressed function in p5

p5.js