间隔未被clearInterval（）清除

Question

我一直在玩帆布，我试图制作一个移动和跳跃的方块，移动部分已完成，但跳跃部分有一个问题：每次跳跃时跳得更快

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

控制台不断打印出＆＃34;间隔清理＆＃34;所以它看起来并没有真正清除它。

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

（当我向右移动并跳跃时，它似乎也会变得更快）

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>