函数内的间隔被调用数百次

Question

When I call the function once, the interval is ok, it is added and cleared as supposed to. When the same function gets called again, the interval is called hundreds of times. How can I stop this behavior and what is wrong with my function?

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);
}

I suspect this is a javascript problem, so my guess is that canvas has nothing to do with this.

Update The function I am calling draw from (which is inside another function):

    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

What i understood, according to that i am posting this answer

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 The function I am calling draw from (which is inside another function):

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);

You can declare the check variable somewhere outside and set it to 0 before calling the draw function from some other function or you can just pass the check variable with initial value what ever you want to the draw function

Answer 2

You should call setInterval() only once and outside the draw function. The way you do it, you are starting an increasing number of timers that cause the draw() function to be called an infinitely growing number of times. Alternatively: "To execute a function only once, after a specified number of milliseconds, use the setTimeout() method". Reference: Window setInterval . setTimeout() could be used inside your draw() function.