间隔未被clearInterval()清除

interval not getting cleared by clearInterval()

本文关键字：清除 clearInterval      更新时间：2023-09-26

我一直在玩画布，我试图做一个移动和跳跃的正方形，移动部分完成了，但跳跃部分有一个问题:它跳得更快每次你跳

这里有一个jsfield

，下面是代码:

///////////////////////////////////////////////////////////////////////////////
//                                 VARIABLES                                 //
///////////////////////////////////////////////////////////////////////////////
var canvas = document.getElementById("arena");
var ctx = canvas.getContext("2d");
var square = new Player("#330099", 32, 32);
var keys = [];
var velX = 0;
var speed = 50;
var friction = 0.8;
var jumping = false;
var jumpInterval;

///////////////////////////////////////////////////////////////////////////////
//                                  OBJECTS                                  //
///////////////////////////////////////////////////////////////////////////////
function Player(color, width, height, jumpHeight, drawAction){
    this.color = color || "#000000";
    this.width = width || 50;
    this.height = height || 50;
    this.jumpHeight = jumpHeight || 100;
    this.x = canvas.width/2;
    this.y = canvas.height-this.height;
    this.draw = drawAction || function(){
        ctx.fillStyle = this.color;
        ctx.fillRect(this.x, this.y, this.width, this.height);
    };
};

///////////////////////////////////////////////////////////////////////////////
//                              EVENT LISTENERS                              //
///////////////////////////////////////////////////////////////////////////////
document.body.addEventListener("keydown", function (e) {
    keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function (e) {
    keys[e.keyCode] = false;
});

///////////////////////////////////////////////////////////////////////////////
//                                 FUNCTIONS                                 //
///////////////////////////////////////////////////////////////////////////////
function Jump(){
    if(jumping == true){
        if(square.y+square.height > canvas.height-square.jumpHeight){
            square.y--;
            console.log("jumping");
        } else { jumping = false; console.log("peak reached"); }
    }
    if(jumping == false){
        if(square.y < canvas.height-square.height){ square.y++; console.log("falling"); }
        else { clearInterval(jumpInterval); console.log("interval cleaned"); }
    }
}

///////////////////////////////////////////////////////////////////////////////
//                               UPDATE & DRAW                               //
///////////////////////////////////////////////////////////////////////////////
function update(){
    window.requestAnimationFrame(update);
    if(keys[37]){ //left arrow
        if(velX > -speed){
            velX--;
        }
    }
    if(keys[39]){ //right arrow
        if(velX < speed){
            velX++;
        }
    }
    if(keys[32]){ //space bar
        if(jumping == false){
            jumping = true;
        }
        jumpInterval = setInterval(Jump, 10);
    }
    /*
    if(keys[39] == false){
        jumping = false;
        jumpInterval = setInterval(Jump, 10);
    }
    */
    if(velX != 0){
        velX *= friction;
    }
    square.x += velX;
    draw()
}
function draw(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    square.draw();
}
update()

控制台不断打印出"interval cleaned"，因此看起来它实际上并没有清除它。

这意味着我每次跳跃的间隔越来越多，这就解释了这个问题，除了我不知道为什么它没有被清除!

(当我向右移动并跳跃时，它似乎也走得更快)

问题是，当空格键被按下时，您为每个update调用设置了一个新的间隔:

if(keys[32]){ //space bar
    if(jumping == false){
        jumping = true;
    }
    jumpInterval = setInterval(Jump, 10);
}

但最有可能的是，update将在按空格键时被调用多次。在这种情况下，您将只清除最后一个间隔。

相反，您应该只设置一个间隔: 
if(keys[32]){ //space bar
    if(jumping == false){
        jumping = true;
        jumpInterval = setInterval(Jump, 10);
    }
}


///////////////////////////////////////////////////////////////////////////////
//                                 VARIABLES                                 //
///////////////////////////////////////////////////////////////////////////////
var canvas = document.getElementById("arena");
var ctx = canvas.getContext("2d");
var square = new Player("#330099", 32, 32);
var keys = [];
var velX = 0;
var speed = 50;
var friction = 0.8;
var jumping = false;
var jumpInterval;
///////////////////////////////////////////////////////////////////////////////
//                                  OBJECTS                                  //
///////////////////////////////////////////////////////////////////////////////
function Player(color, width, height, jumpHeight, drawAction) {
  this.color = color || "#000000";
  this.width = width || 50;
  this.height = height || 50;
  this.jumpHeight = jumpHeight || 100;
  this.x = canvas.width / 2;
  this.y = canvas.height - this.height;
  this.draw = drawAction || function() {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
  };
};
///////////////////////////////////////////////////////////////////////////////
//                              EVENT LISTENERS                              //
///////////////////////////////////////////////////////////////////////////////
document.body.addEventListener("keydown", function(e) {
  keys[e.keyCode] = true;
});
document.body.addEventListener("keyup", function(e) {
  keys[e.keyCode] = false;
});
///////////////////////////////////////////////////////////////////////////////
//                                 FUNCTIONS                                 //
///////////////////////////////////////////////////////////////////////////////
function Jump() {
  if (jumping == true) {
    if (square.y + square.height > canvas.height - square.jumpHeight) {
      square.y--;
      console.log("jumping");
    } else {
      jumping = false;
      console.log("peak reached");
    }
  }
  if (jumping == false) {
    if (square.y < canvas.height - square.height) {
      square.y++;
      console.log("falling");
    } else {
      clearInterval(jumpInterval);
      console.log("interval cleaned");
    }
  }
}
///////////////////////////////////////////////////////////////////////////////
//                               UPDATE & DRAW                               //
///////////////////////////////////////////////////////////////////////////////
function update() {
  window.requestAnimationFrame(update);
  if (keys[37]) { //left arrow
    if (velX > -speed) {
      velX--;
    }
  }
  if (keys[39]) { //right arrow
    if (velX < speed) {
      velX++;
    }
  }
  if (keys[32]) { //space bar
    if (jumping == false) {
      jumping = true;
      jumpInterval = setInterval(Jump, 10);
    }
  }
  if (velX != 0) {
    velX *= friction;
  }
  square.x += velX;
  draw()
}
function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  square.draw();
}
update()
#arena {
  border: 2px solid black;
}
<canvas id="arena" width="400px" height="200px;"></canvas>

相关文章：