Интервал внутри функции вызывает сотни раз

Question

Когда я вызываю функцию один раз, интервал в порядке, он добавляется и очищается, как предполагалось. Когда эта же функция снова вызвана, интервал называется сотнями раз. Как я могу остановить это поведение и что не так с моей функцией?

function draw(){ 
    ctx.clearRect(0,0,width,height); 
    ctx.fillStyle = 'blue'; 

    // Add cube width 5px 
    if(cube.width <= 300){ 
     cube.width += 5; 
    } 

    // Draw it on the screen 
    ctx.fillRect(cube.x,cube.y,cube.width,cube.height); 

    // Create function b(e) to check cubes collision 
    function b(e){ 
     var x = e.clientX - ctx.canvas.offsetLeft; 
     var y = e.clientY - ctx.canvas.offsetTop; 

     if(x >= cube.x && x <= cube.x + cube.width 
      && y >= cube.y && y <= cube.y + cube.height){ 
      ctx.canvas.removeEventListener('click',b,false); 
      level1(); 
      return; 
     } 
    } 

    ctx.canvas.addEventListener('click', b, false); 

    // Set the interval to 60 FPS 
    var timer = setInterval(function(){ 
     check += 1; 

     console.log(check); 

     if(check > 50){ 
      return; 
     } 
     // Call again the same function 
     draw(); 
    },1000/60); 
} 

Я подозреваю, что это Java-проблема, поэтому я думаю, что полотно не имеет ничего общего с этим.

Update Функция Я зову дро из (который находится внутри другой функции):

function a(e){ 
     var x = e.clientX - ctx.canvas.offsetLeft; 
     var y = e.clientY - ctx.canvas.offsetTop; 

     if(x >= player.x && x <= player.x + player.width 
      && y >= player.y && y <= player.y + player.height){ 
      ctx.canvas.removeEventListener('click',a,false); 
      draw(); 
     } 
    } 

    // Add the click event using the previous function 
    ctx.canvas.addEventListener('click', a, false); 

Answer 1

Что я понял, в соответствии с этим я вывешиваю этот ответ

function draw(check){ 
    ctx.clearRect(0,0,width,height); 
    ctx.fillStyle = 'blue'; 

    // Add cube width 5px 
    if(cube.width <= 300){ 
     cube.width += 5; 
    } 

    // Draw it on the screen 
    ctx.fillRect(cube.x,cube.y,cube.width,cube.height); 

    // Create function b(e) to check cubes collision 
    function b(e){ 
     var x = e.clientX - ctx.canvas.offsetLeft; 
     var y = e.clientY - ctx.canvas.offsetTop; 

     if(x >= cube.x && x <= cube.x + cube.width 
      && y >= cube.y && y <= cube.y + cube.height){ 
      ctx.canvas.removeEventListener('click',b,false); 
      level1(); 
      return; 
     } 
    } 

    ctx.canvas.addEventListener('click', b, false); 

    check+ = 1; 
    if(check <=50) 
    { 
     // Set the interval to 60 FPS 
     var timer = setTimeout(function() 
     { 
     // Call again the same function 
     draw(check); 
     },1000/60); 
    } 
} 

Update Функция Я зову дро из (который находится внутри другой функции):

function a(e){ 
    var x = e.clientX - ctx.canvas.offsetLeft; 
    var y = e.clientY - ctx.canvas.offsetTop; 

    if(x >= player.x && x <= player.x + player.width 
     && y >= player.y && y <= player.y + player.height){ 
     ctx.canvas.removeEventListener('click',a,false); 
     var check = 0; 
     draw(check); 
    } 
} 

// Add the click event using the previous function 
ctx.canvas.addEventListener('click', a, false); 

Вы можете объявить проверьте переменную где-то снаружи и установите ее на 0 перед вызовом функции рисования из какой-либо другой функции или вы можете просто передать контрольную переменную с начальным значением, что бы вы хотели использовать для функции рисования

Answer 2

Вы должны вызвать setInterval() только один раз и вне функции отрисовки. Как вы это делаете, вы начинаете увеличивать количество таймеров, которые вызывают функцию draw(), которую можно назвать бесконечно растущим числом раз. Альтернативно: «Для выполнения функции только один раз, после заданного количества миллисекунд, используйте метод setTimeout()». Ссылка: Window setInterval. setTimeout() может использоваться внутри вашей функции draw().