函数内部的区间被称为数百次

当我调用一次函数时，间隔是可以的，它会按照假定的方式添加和清除。当再次调用相同的函数时，间隔被称为数百次。如何停止此行为以及我的功能出了什么问题？函数内部的区间被称为数百次

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

我怀疑这是一个JavaScript问题，所以我的猜测是帆布与此无关。

更新我从调用平局（这是另一个函数内）的功能：

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

来源

2015-02-07 GSquadron

你正在创建一个无限循环，即使你还没有声明和初始化检查变量 – 2015-02-07 19:48:14

这只是整个软件的一部分。它完美地工作，但如果你只是看着这段代码，你是对的。 – GSquadron 2015-02-07 21:03:18

由于我看不到绘图函数内的检查变量声明，因此它必须在绘图函数之外，并且它看起来像只想调用draw函数50次。所以你可以在check超过50时清除计时器，希望它能帮助你。 – 2015-02-08 06:16:06

我的理解，根据该我张贴这个答案

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

更新我从调用绘制功能（这是另一个函数内部）：

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，然后再调用其他函数的绘图函数，或者您可以将初始值传递给您的绘图函数

来源

2015-02-08 18:40:45

它不起作用。我点击矩形，它不动画，除非我点击它。我希望它在调用相同的函数时“重新生成”。基本上，重置cube.width的值。 – GSquadron 2015-02-08 19:06:54

你可以发布你从哪里调用绘图功能 – 2015-02-08 19:14:08

我发布它作为更新。 – GSquadron 2015-02-08 19:18:52

你应该叫setInterval()只有一次，绘制函数外。你这样做的方式，你开始越来越多的定时器，导致draw()函数被称为无限增长的次数。或者：“要在指定的毫秒数后执行一次函数，请使用setTimeout()方法”。参考：Window setInterval。 setTimeout()可用于您的draw()功能。

来源

2015-02-07 19:45:21 Tarik

我不想在函数外面调用它，因为我有其他计时器，这实际上意味着我应该将所有计时器放在所有函数之外。如果我把它放在外面，被另一个函数调用的draw函数使得它在调用该函数时永远不会执行，但它会在外部执行，无限地运行相同的问题。 – GSquadron 2015-02-07 21:06:06

函数内部的区间被称为数百次

回答

相关问题