如何改进我的程序以避免晃动盒子

Question

我无法消除使用上部按钮预计会移动的盒子的晃动。我该怎么做才能避免晃动？我想通过上面的按钮来控制红色盒子，那么我该怎么做才能使盒子不晃动呢？如何改进我的代码而不使用 setInterval 命令，我认为这是晃动的主要原因。

我试图解决这个问题，但没有任何结果。我想使用按钮获得盒子的平滑移动。

const pluss = document.querySelector(".box");
const moveY = document.querySelector(".move-y");
const moveX = document.querySelector(".move-x");
const movexP = document.querySelector(".move-xp");
const moveyM = document.querySelector(".move-ym");
const ccol = document.querySelector(".change-color");
let counterx = 940;
let countery = 460;
let sizex = 20;
let sizey = 20;
ccol.addEventListener("click", function() {
  pluss.style.backgroundColor = `hsl(${Math.random() * 360}, 90%, 70%)`
});
moveX.addEventListener("mousedown", function() {
  setInterval(() => {
    counterx++;
    pluss.style.left = counterx + "px"
  }, 1)
});
moveX.addEventListener("mouseup", function() {
  setInterval(() => {
    counterx--;
    pluss.style.left = counterx + "px";
  }, 1)
});
moveY.addEventListener("mousedown", function() {
  setInterval(() => {
    countery++;
    pluss.style.top = countery + "px";
  }, 1)
})
moveY.addEventListener("mouseup", function() {
  setInterval(() => {
    countery--;
    pluss.style.top = countery + "px";
  }, 1)
})
movexP.addEventListener("mousedown", function() {
  setInterval(() => {
    counterx--;
    pluss.style.left = counterx + "px";
  }, 1)
})
movexP.addEventListener("mouseup", function() {
  setInterval(() => {
    counterx++;
    pluss.style.left = counterx + "px";
  }, 1)
})
moveyM.addEventListener("mousedown", function() {
  setInterval(() => {
    countery--;
    pluss.style.top = countery + "px";
  }, 1)
})
moveyM.addEventListener("mouseup", function() {
  setInterval(() => {
    countery++;
    pluss.style.top = countery + "px";
  }, 1)
})

function sizep() {
  sizex = sizex + 20;
  sizey = sizey + 20;
  pluss.style.height = sizex + "px";
  pluss.style.width = sizey + "px"
}

function sizem() {
  sizex = sizex - 20;
  sizey = sizey - 20;
  pluss.style.height = sizex + "px";
  pluss.style.width = sizey + "px";
}

.mdiv {
  background-color: blanchedalmond;
  padding: 10px;
  border-radius: 20px;
  width: fit-content;
  margin: 15px;
}

body {
  background-color: black;
  padding: 0;
  margin: 0;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 20px;
  width: 20px;
  background-color: orangered;
  border-radius: 4px;
}

.move-x,
.move-y,
.move-xp,
.move-ym,
.sizeplus,
.sizeminus,
.change-color {
  color: black;
  background-color: grey;
  border: none;
  border-radius: 15px;
  margin: 10px;
  padding: 15px;
  display: inline-block;
}

</style>
<div class="mdiv">
  <button class="change-color">Color</button>
  <button class="move-x">Position x</button>
  <button class="move-y">Position y</button>
  <button class="move-xp">Position  x minus</button>
  <button class="move-ym">Position y minus</button>
  <button class="sizeplus" onclick="sizep()">Increase size</button>
  <button class="sizeminus" onclick="sizem()">Decrease size</button>
</div>
<div class="box"></div>

笔

Answer 1

您应该尝试清除在 mousedown 和 mouseup 上创建的所有间隔。此更新的代码使用去抖动方法，因为您使用这些按钮的次数越多，创建的 setInterval 的实例就越多。

const pluss = document.querySelector(".box");
const moveY = document.querySelector(".move-y");
const moveX = document.querySelector(".move-x");
const movexP = document.querySelector(".move-xp");
const moveyM = document.querySelector(".move-ym");
const ccol = document.querySelector(".change-color");
let counterx = 940;
let countery = 460;
let sizex = 20;
let sizey = 20;
let intervalId;

ccol.addEventListener("click", function () {
  pluss.style.backgroundColor = `hsl(${Math.random() * 360}, 90%, 70%)`;
});

moveX.addEventListener("mousedown", function () {
  intervalId = setInterval(() => {
    counterx++;
    pluss.style.left = counterx + "px";
  }, 10);
});

moveX.addEventListener("mouseup", function () {
  clearInterval(intervalId);
});

moveX.addEventListener("mouseleave", function () {
  clearInterval(intervalId);
});

moveY.addEventListener("mousedown", function () {
  intervalId = setInterval(() => {
    countery++;
    pluss.style.top = countery + "px";
  }, 10);
});

moveY.addEventListener("mouseup", function () {
  clearInterval(intervalId);
});

moveY.addEventListener("mouseleave", function () {
  clearInterval(intervalId);
});

movexP.addEventListener("mousedown", function () {
  intervalId = setInterval(() => {
    counterx--;
    pluss.style.left = counterx + "px";
  }, 10);
});

movexP.addEventListener("mouseup", function () {
  clearInterval(intervalId);
});

movexP.addEventListener("mouseleave", function () {
  clearInterval(intervalId);
});

moveyM.addEventListener("mousedown", function () {
  intervalId = setInterval(() => {
    countery--;
    pluss.style.top = countery + "px";
  }, 10);
});

moveyM.addEventListener("mouseup", function () {
  clearInterval(intervalId);
});

moveyM.addEventListener("mouseleave", function () {
  clearInterval(intervalId);
});

function sizep() {
  sizex = sizex + 20;
  sizey = sizey + 20;
  pluss.style.height = sizex + "px";
  pluss.style.width = sizey + "px";
}

function sizem() {
  sizex = sizex - 20;
  sizey = sizey - 20;
  pluss.style.height = sizex + "px";
  pluss.style.width = sizey + "px";
}

.mdiv {
  background-color: blanchedalmond;
  padding: 10px;
  border-radius: 20px;
  width: fit-content;
  margin: 15px;
}

body {
  background-color: black;
  padding: 0;
  margin: 0;
}

.box {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 20px;
  width: 20px;
  background-color: orangered;
  border-radius: 4px;
}

.move-x,
.move-y,
.move-xp,
.move-ym,
.sizeplus,
.sizeminus,
.change-color {
  color: black;
  background-color: grey;
  border: none;
  border-radius: 15px;
  margin: 10px;
  padding: 15px;
  display: inline-block;
}

</style>
<div class="mdiv">
  <button class="change-color">Color</button>
  <button class="move-x">Position x</button>
  <button class="move-y">Position y</button>
  <button class="move-xp">Position  x minus</button>
  <button class="move-ym">Position y minus</button>
  <button class="sizeplus" onclick="sizep()">Increase size</button>
  <button class="sizeminus" onclick="sizem()">Decrease size</button>
</div>
<div class="box"></div>