使用 setInterval() 和 class – p5.js 交换图像

Question

我正在做一个关于 p5.js

的项目

我的目标是每 X 秒交换一次图像，就像我在这个例子中所做的那样 here。

问题是当 I try to do the same with a class object 时，setInterval() 不再起作用。

这可能与范围有关吗？

Answer 1

让我们从一个更简单的例子开始：

class Test {
  constructor(testMessage) {
    this.testMessage = testMessage;
  }
  show() {
    println(this.testMessage);
  }
}

您希望这段代码会发生什么？

var message = 'hello';
var test = new Test(message);
message = 'goodbye';
test.show();

你的代码现在的工作方式，看起来你希望它打印 'goodbye'，但实际上它会打印 'hello'.

这是因为您将变量的 value 传递给 Test 构造函数。您现在有两个变量指向相同的 'hello' 值。然后您修改第一个变量，，但这不会自动更改第二个变量的值。

要解决此问题，您可以只使用一个全局 message 变量，如下所示：

class Test {
  show() {
    println(message);
  }
}

var message = 'testing';
var test = new Test();
test.show();

或者您可以创建类似于 setMessage() 函数的东西，允许您更改 class:

中的值

class Test {
  constructor(testMessage) {
    this.testMessage = testMessage;
  }
  show() {
    println(this.testMessage);
  }
  setMessage(testMessage) {
    this.testMessage = testMessage;
  }
}

使用 setInterval() 和 class – p5.js 交换图像

Swap image using setInterval() with class – p5.js

javascript

class

setinterval

p5.js