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をキャンセルされていません。 2回目のsetupコールの後に、drawを単位時間に2回以上実行するなどのようになります。

Answer 2

setIntervalの呼び出しが互いに積み重なっている可能性があり、drawBackgroundが思ったよりも頻繁に発生する可能性があります。

あなたの 'のsetInterval' を保持する変数を作成します。

var drawRepeater = setInterval(draw, 36); 

そして、あなたがたsetIntervalを再度呼び出す前てclearIntervalを追加します。

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