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

【问题标题】：Javascript: Simple animation doesnt stop when setting flag to falseJavascript：将标志设置为false时简单动画不会停止
【发布时间】：2015-12-29 21:43:04
【问题描述】：

我正在尝试在“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)
   }

【问题讨论】：

isDown 的变量范围是什么？
@AdamKonieska 你可以在我的 Jsfiddle 中看到它。它具有全球范围

标签： javascript html5-canvas

【解决方案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/

【讨论】：

你是怎么想出来的？我真的需要一些更好的策略来发现我的代码中的逻辑问题
它可以工作，尽管总是欢迎另一种更好的编码风格。我刚听说标志是个愚蠢的主意：（
老实说，我是通过实验找到的。我尝试将 += 100 更改为 1 只是为了看看它会做什么。然后我发现它以某种方式使用 maxValue 来推迟随着时间的推移增加角度。之后，我只是搜索了代码中的所有maxValue 引用，以查看它在哪里被使用或更改。之后就很容易了，因为这两行是更新函数中唯一引用它的地方。

【解决方案2】：

动画不会在mouseup 上停止，因为update 函数仍在定期运行。你可以按照约瑟夫所说的去做，或者在你不需要的时候取消更新。 requestAnimationFrame 返回一个您可以保存的 ID，如下所示：

requestID = window.requestAnimationFrame(callback);

然后你可以像这样取消它：

cancelAnimationFrame(requestID);

【讨论】：