Question

我写了一个脚本，当单击页面时，该脚本会使灰色框跳转。但是，当框仍在跳动时，如果单击页面，跳动功能仍然可以激活。如果我重复单击该页面，则该框就像是在坐立不安。我该如何解决？我只想在上一次跳转完成后才允许该框再次跳转。

HTML代码：

<!DOCTYPE html>
<html>
<head>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">
  </script>
  <script type="text/javascript" src="index.js">
  </script>
  <style>
    html, body {
      position:fixed;
      width:100%;
      height:100%;
      margin:0;
    }    
  </style>
</head>
<body id="body">
  <div id="box"></div>
  <div id="Floor"></div>
</body>
</html>

JS代码：

let up = false;
let jumping = false;

function box(x, y, width, height, jHeight) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;
  this.jHeight = jHeight;

  boxID = document.getElementById('box');
  boxID.style.bottom = y + 'px';
  boxID.style.left = x + 'px';
  boxID.style.width = width + 'px';
  boxID.style.height = height + 'px';
  boxID.style.backgroundColor = 'grey';
  boxID.style.position = 'fixed';   
}

function Floor(x, y, width, height) {
  this.x = x;
  this.y = y;
  this.width = width;
  this.height = height;

  FloorID = document.getElementById('Floor');
  FloorID.style.bottom = y + 'px';
  FloorID.style.left = x + 'px';
  FloorID.style.width = width + '%';
  FloorID.style.height = height + 'px';
  FloorID.style.backgroundColor = 'black';
  FloorID.style.position = 'fixed';
}

function setup() {
  obj = new box(20, 200, 40, 40, 300);
  Ground = new Floor(0, 0, 100, 200);
}

function jump(up, jumping) {
  if(up && (obj.y<obj.jHeight)) {
    jumping = true;
    obj.y+=5;
    boxID.style.bottom = obj.y +'px';
    timer = setTimeout(function() {
        jump(up, jumping);
    }, 15);
  } else if (up) {
    jumping = true;
    up = false;
    timer = setTimeout(function() {
        jump(up, jumping);
    },15);
  } else if (!up && (obj.y>Ground.height)) {
    jumping = true;
    obj.y-=5;
    boxID.style.bottom = obj.y +'px';
    timer = setTimeout(function() {
        jump(up, jumping);
    },15);
  } else if (obj.y == Ground.height) {
    jumping = false;
  }
}

window.onload = function() {
  setup();

  document.addEventListener("click",function() {
    if (jumping == false) {
      jump(true, true);
    }
  });
};

Answer 1

let up = false;
let jumping = false;
function box(x, y, width, height, jHeight){
this.x = x;
this.y = y;
this.width = width;
this.height = height;
this.jHeight = jHeight;

boxID = document.getElementById('box');
boxID.style.bottom = y + 'px';
boxID.style.left = x + 'px';
boxID.style.width = width + 'px';
boxID.style.height = height + 'px';
boxID.style.backgroundColor = 'grey';
boxID.style.position = 'fixed'; 
}

function Floor(x, y, width, height){
this.x = x;
this.y = y;
this.width = width;
this.height = height;

FloorID = document.getElementById('Floor');
FloorID.style.bottom = y + 'px';
FloorID.style.left = x + 'px';
FloorID.style.width = width + '%';
FloorID.style.height = height + 'px';
FloorID.style.backgroundColor = 'black';
FloorID.style.position = 'fixed';
}

function setup(){
obj = new box(20, 200, 40, 40, 300);
Ground = new Floor(0, 0, 100, 200);
}

function jump(up, jum){
if(up && (obj.y<obj.jHeight)){
    jum = true;
    obj.y+=2;
    boxID.style.bottom = obj.y +'px';
    timer = setTimeout(function(){
        jump(up, jum);
    },15
    );
}else if (up){
    jum = true;
    up = false;
    timer = setTimeout(function(){
        jump(up, jum);
    },15
    );
}else if (!up && (obj.y>Ground.height)){
    jum = true;
    obj.y-=2;
    boxID.style.bottom = obj.y +'px';
    timer = setTimeout(function(){
        jump(up, jum);
    },15
    );
}else if (obj.y == Ground.height){
    jum = false;
}
jumping = jum
}


window.onload = function() {
    setup();

    document.addEventListener("click",function(){
                if(jumping == false){
                    jump(true, true);
                }
            }
        );
};

我假设您处理正确，我只是为jump函数添加了jumping = jum并更改了函数变量的名称，因为它没有修改全局跳转变量。实际上我认为当您通过时实际上正在发生变量名称为“ jumping”，并且您的全局变量名称具有相同的名称，它将忽略它并使用它自己的局部变量，这就是为什么在我对其进行测试时以下情况始终为真：

 if(jumping == false){
           jump(true, true);
    }

我只是为了测试而更改了速度

Answer 2

发生这种情况是因为您使用了不同的跳跃变量。全局跳跃与跳跃功能的内部跳跃不同。尽量不要通过跳跳功能。或将其更改为其他名称变量

function jump(up, unused){ //unused param unused
console.log(jumping);
if(up && (obj.y<obj.jHeight)){
jumping = true;
obj.y+=5;
boxID.style.bottom = obj.y +'px';
timer = setTimeout(function(){
    jump(up, jumping);
},15
);
}else if (up){
jumping = true;
up = false;
timer = setTimeout(function(){
    jump(up, jumping);
},15
);
}else if (!up && (obj.y>Ground.height)){
jumping = true;
obj.y-=5;
boxID.style.bottom = obj.y +'px';
timer = setTimeout(function(){
    jump(up, jumping);
},15
);
}else if (obj.y == Ground.height){
jumping = false;
}
}

JS：如何使框仅在上一次跳转完成后才能再次跳转

2 个答案: