当我调用该函数一次时,间隔是正常的,它会被添加并清除。当再次调用相同的函数时,间隔被调用数百次。 如何阻止此行为以及我的功能有什么问题?
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);
答案 0 :(得分: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);
}
}
更新我正在调用的函数draw(来自另一个函数):
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);
你可以在外面的某处声明check变量并在从其他函数调用draw函数之前将其设置为0,或者你只需将初始值的check变量传递给绘制函数
答案 1 :(得分:0)
你应该只在调用函数之外调用setInterval()
一次。你这样做的方式是,你开始使用越来越多的定时器,导致draw()
函数的调用次数无限增长。
或者:“要在指定的毫秒数后执行一次函数,请使用setTimeout()
方法”。参考:Window setInterval。可以在setTimeout()
函数中使用draw()
。