Javascript:将标志设置为 false 时简单动画不会停止

Question

我试图在“mousedown”上触发动画，并在释放鼠标后立即停止它。

在“mousedown”上，我将一个标志设置为 true，这设置了单击相应按钮的动画的条件。问题出在“mouseup”上，我将标志设置为 false 但动画不会停止。我的控制台中没有收到任何错误，因此这似乎是一个基于逻辑的错误。

我的错误是什么？我该如何解决这个问题？

https://jsfiddle.net/b4kn4w3g/2/

基本代码:

   function eventBundle(e) {
     if (e.target !== e.currentTarget) {
       if (e.target == parent.children[0]) {
         isDown = true;
         amount = "reduce";
       } else if (e.target == parent.children[1]) {
         isDown = true;
         amount = "increase";
       }
     }
     e.stopPropagation();
   }
   window.addEventListener("mouseup", function(){
    isDown = false;
    amount = "neutral";
    });
   function holdStuff() {
     if (isDown == true && amount == "increase") {
       maxValue += 100;
     } else if (isDown == true && amount == "reduce") {
       maxValue -= 100;
     }
     requestAnimationFrame(holdStuff)
   }

Answer 1

将 maxValue = minValue 添加到您的 mouseup 事件监听器。问题在于，您的更新函数随着 minValue += 5; 和 minValue -= 5; 增量(值 5)增加或减少。当您将最大值增加或减少 100 时，它最终必须以 5 的增量达到该值。将 maxValue 设置为当前的 minValue 会停止当前状态的更改。

window.addEventListener("mouseup", function(){
    maxValue = minValue;
    isDown = false;
    amount = "neutral";
});

https://jsfiddle.net/nexrytes/