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

Question

我正在尝试在 "mousedown" 上触发动画，并在松开鼠标后立即停止。

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

我这里有什么错误，我该如何解决？

关键代码：

   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）增加或减少。当您将 max 增加或减少 100 时，它最终必须以 5 的增量到达那里。将 maxValue 设置为当前的 minValue 会停止当前状态的更改。

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

https://jsfiddle.net/nexrytes/

Answer 2

动画不会在 mouseup 停止，因为 update 函数仍会定期运行。您可以按照 Joseph 所说的进行操作，或者在不需要时取消更新。 requestAnimationFrame returns 一个你可以保存的ID，像这样：

requestID = window.requestAnimationFrame(callback);

然后你可以这样取消它：

cancelAnimationFrame(requestID);

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

Javascript: Simple animation doesnt stop when setting flag to false

javascript

html5-canvas