Javascript中的图像下降（图像下降过快）

第一次调用函数时，以下代码起作用。但是，当我再次调用setup（）函数时，速度会增加（图像下降得更快）。我试图弄清楚如何保持初始速度，而不是每次调用函数时都增加速度。我已经为此工作了好几天了。任何帮助都将不胜感激

（为什么我需要这个：我正在开发一个功能，允许用户在4种不同类型的下降图像之间切换。用户将单击图像，这将触发该功能。但是，每次用户单击下降速度都会增加。）

var-ctx；
var-imgBg；
var-imgDrops；
var x=0；
var y=0；
var noOfDrops=50；
var fallingDrops=[]；
函数background（）{
ctx.drawImage（imgBg，0，0）；//背景
}
函数绘图（）{
牵引杆接地（）；
对于（变量i=0；i450）{//当雨滴落在视野之外时，重复雨滴
fallingDrops[i].y=-25//说明图像大小
fallingDrops[i].x=Math.random（）*1000；//使其沿宽度随机显示
}
}
}
函数设置（）{
var canvas=document.getElementById（'canvasRegn'）；
if（canvas.getContext）{
ctx=canvas.getContext（'2d'）；
imgBg=新图像（）；
imgBg.src=“/BACKGROUND.png”；
设定间隔（图36）；
对于（变量i=0；i

您没有取消先前的

设置间隔。在第二次
设置
调用后，您将在单位时间内执行两次
绘制
，以此类推

...
var fallingDrops = [];
var timer = null;

...

clearInterval(timer);
timer = setInterval(draw, 36);

...

setInterval调用可能会相互叠加，导致trackground发生的频率比您想象的要高

创建一个变量来保存“setInterval”：

var drawRepeater = setInterval(draw, 36);

并在重新调用setInterval之前添加clearInterval：

clearInterval(drawRepeater);
var drawRepeater = setInterval(draw, 36);

关于所描述行为的原因，您是正确的，但您的代码是错误的。
setInterval
的返回值不能存储在局部变量中。在下一次执行
setup
时，当传递到
clearInterval
时，变量的值将是
undefined
。
var drawRepeater = setInterval(draw, 36);

clearInterval(drawRepeater);
var drawRepeater = setInterval(draw, 36);