Javascript 使用函数调用类内的间隔

我会尽我所能描述我正在努力实现的目标，如果有更好的方法，请纠正我！）

我刚开始用javascript练习类，我试图从类函数调用一个间隔，如下所示：

startRnd() {
  timer = setInterval(this.moveRnd, 1000);
}

正如您在下面的完整代码中所看到的，我在函数中添加了注释，因为我试图使它更“动态”，我试图使它如此。当我创建另一个气泡并单击“随机”时，它会将其添加到画布中，并在创建和移动前一个气泡的基础上随机移动它

因此，两次单击后的结果将是两个随机气泡在画布上移动。 当我按下“停止”键时，两个都会停止

编辑： 当我调用“startRnd”时，其他被称为“this”的函数将不再被识别，我无法理解它是如何工作的：(

完整代码：

let-bubble；
让can=document.getElementById（“myCanvas”）；
设cm=can.getContext（'2d'）；
让定时器；
//函数startRnd（）{
//计时器=setInterval（函数（）{bubble.moveRnd（）；}，1000）；
// }
//函数stopRnd（）{
//清除间隔（计时器）；
// }
函数设置气泡（tempX、tempY、tempR）{
清除间隔（计时器）；
if（tempX==未定义| | tempY==未定义| | tempR==未定义）{
tempX=0；
tempY=0；
tempR=0；
}
气泡=新气泡（tempX、tempY、tempR）；
bubble.createBubble（bubble.x，bubble.y，bubble.r）；
日志（bubble.x，bubble.y，bubble.r）；
}
阶级泡沫{
构造函数（tempX、tempY、tempR）{
这个.x=tempX；
这个.y=tempY；
这个.r=tempR；
}
移动（节奏，节奏）{
这个.x=tempX；
这个.y=tempY；
}
CreateBuble（tempX、tempY、tempR）{
cm.beginPath（）；
厘米弧（tempX，tempY，tempR，0，2*Math.PI）；
cm.笔划（）；
}
clrbuble（）{
厘米clearRect（0，0，罐宽，罐高）；
}
moveRnd（）{
this.x=Math.floor（Math.random（）*（+can.width-this.r*2）+this.r）；
this.y=Math.floor（Math.random（）*（+can.width-this.r*2）+this.r）；
如果（此.x<0）{
this.x=this.x+this.r；
}
如果（此.y<0）{
this.y=this.y+this.r；
}
log（this.x，this.y）；
这个.clrbuble（）；
this.createBubble（this.x，this.y，this.r）；
}
startRnd（）{
定时器=设置间隔（this.moveRnd，1000）；
}
stopRnd（）{
清除间隔（计时器）；
}
}

文件






制造泡沫
重置
随机运动
停止
结果：

更新：如果有人想多玩一点，就创建一个游戏。

我想建议一种更易于管理的体系结构

您的气泡创建不应该是

气泡功能的一部分。
另外，由于您需要多个
气泡
s，因此您需要一个所有者来维护所有这些气泡，因此您应该首先创建一个数组

然后你可以有一个函数在一个时间间隔内运行，这个函数应该负责两件事

在动画开始时清除画布
让你所有的
泡泡
自己玩
每个
Bubble
必须是其流程的所有者，即他们应该有一个
play
功能，该功能有两个职责

更新气泡的位置（在您的情况下，这是随机的）
在更新的位置绘制气泡
这种体系结构允许您通过划分职责轻松处理复杂的逻辑

运行代码段并将其签出

问我你对此有什么疑问。我知道一开始很难理解，但一旦你明白了，你就再也回不去了


让气泡=[]；
让can=document.getElementById（“myCanvas”）；
设cm=can.getContext（'2d'）；
让玩=假；
函数startRnd（）{
玩=真；
}
函数stopRnd（）{
玩=假；
}
函数onload（）{
设置气泡（）；
设置间隔（播放，500）；
}
函数播放（）{
厘米clearRect（0，0，罐宽，罐高）；
bubbles.forEach（bubble=>bubble.play（））；
}
函数设置气泡（tempX、tempY、tempR）{
气泡。推动（新气泡（tempX | | 0，tempY | 0，tempR | 0））；
}
函数重置（）{
气泡=[]；
}
阶级泡沫{
构造函数（tempX、tempY、tempR）{
这个.x=tempX；
这个.y=tempY；
这个.r=tempR；
}
play（）{
如果（播放）此.update（）；
这个.draw（）；
}
更新（）{
this.moveRnd（）；
}
画（）{
cm.beginPath（）；
cm.arc（这个.x，这个.y，这个.r，0，2*Math.PI）；
cm.closePath（）；
cm.笔划（）；
}
moveRnd（）{
this.x=Math.floor（Math.random（）*（+can.width-this.r*2）+this.r）；
this.y=Math.floor（Math.random（）*（+can.width-this.r*2）+this.r）；
如果（此.x<0）{
this.x=this.x+this.r；
}
如果（此.y<0）{
this.y=this.y+this.r；
}
}
}

文件






制造泡沫
重置
随机运动
停止
结果：
更新：如果有人想多玩一点，就创建一个游戏。

我想建议一种更易于管理的体系结构

您的气泡创建不应该是
气泡功能的一部分。
另外，由于您需要多个
气泡
s，因此您需要一个所有者来维护所有这些气泡，因此您应该首先创建一个数组

然后你可以有一个函数在一个时间间隔内运行，这个函数应该负责两件事

在动画开始时清除画布
让你所有的
泡泡
自己玩
每个
Bubble
必须是其流程的所有者，即他们应该有一个
play
功能，该功能有两个职责

更新气泡的位置（在您的情况下，这是随机的）
在更新的位置绘制气泡
这种体系结构让您可以通过划分响应来轻松处理复杂的逻辑