javascript - 间隔没有被clearInterval()清除

Question

我一直在玩 Canvas ，我正在尝试制作一个可以移动和跳跃的正方形，移动部分已经完成，但是跳跃部分有一个问题:每次跳跃时它都会跳得更快

here's a jsfiddle

这是代码:

///////////////////////////////////////////////////////////////////////////////
//                                 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()

控制台不断打印出“间隔清理”，因此看起来它实际上并没有清除它。

这意味着每次我跳跃时都会有越来越多的间隔，这可以解释这个问题，只是我不知道为什么它没有被清除!

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

Answer 1

问题是，当按下空格键时，您会在每次 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>