函數內部的區間被稱爲數百次

當我調用一次函數時，間隔是可以的，它會按照假定的方式添加和清除。當再次調用相同的函數時，間隔被稱爲數百次。如何停止此行爲以及我的功能出了什麼問題？函數內部的區間被稱爲數百次

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

函數內部的區間被稱爲數百次

回答

相關問題