Javascript中的圖片下降（圖片下降太快）

Question

首次調用該函數時，以下代碼有效。 但是，當我再次調用setup（）函數時，速度增加了（圖像下降得更快）。 我試圖弄清楚如何在不每次調用函數時都提高速度的情況下保持初始速度。 我已經為此工作了好幾天。 任何幫助將不勝感激。

（為什么需要這樣做：我正在開發一項功能，該功能允許用戶在4種不同類型的下降圖像之間切換。用戶將單擊圖像，這將觸發該功能。但是，每次用戶單擊下降時，速度增加。）

 <canvas id="canvasRegn" width="1000" height="450"style="margin:100px;position:relative;z-index:999999;opacity:0.2;">

var ctx;
var imgBg;
var imgDrops;
var x = 0;
var y = 0;
var noOfDrops = 50;
var fallingDrops = [];


function drawBackground(){  
    ctx.drawImage(imgBg, 0, 0); //Background
}

function draw() {
    drawBackground();

    for (var i=0; i< noOfDrops; i++)
    {
    ctx.drawImage (fallingDrops[i].image, fallingDrops[i].x, fallingDrops[i].y); //The rain drop

    fallingDrops[i].y += fallingDrops[i].speed; //Set the falling speed
    if (fallingDrops[i].y > 450) {  //Repeat the raindrop when it falls out of view
    fallingDrops[i].y = -25 //Account for the image size
    fallingDrops[i].x = Math.random() * 1000;    //Make it appear randomly along the width    
    }

    }
}

function setup() {

    var canvas = document.getElementById('canvasRegn');

    if (canvas.getContext) {
            ctx = canvas.getContext('2d');

                imgBg = new Image();
        imgBg.src = "/BACKGROUND.png";
    setInterval(draw, 36);
    for (var i = 0; i < noOfDrops; i++) {
        var fallingDr = new Object();
        fallingDr["image"] =  new Image();


    fallingDr.image.src = '/image.png';


        fallingDr["x"] = Math.random() * 1000;
        fallingDr["y"] = Math.random() * 5;
        fallingDr["speed"] = 3 + Math.random() * 5;
        fallingDrops.push(fallingDr);
        }

    }
}




setup();

Answer 1

您不會取消先前的setInterval 。 在第二次setup調用之后，您將在單位時間內執行兩次draw ，依此類推。

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

...

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

...

Answer 2

setInterval調用可能會相互疊加，導致drawBackground發生的次數比您想象的要多。

創建一個變量來保存您的“ setInterval”：

var drawRepeater = setInterval(draw, 36);

並在調用setInterval之前添加clearInterval：

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