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

Javascript: Simple animation doesnt stop when setting flag to false

本文关键字：动画 简单 flag 设置 false Javascript      更新时间：2023-09-26

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

将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/

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

requestID = window.requestAnimationFrame(callback);

然后你可以这样取消它：

cancelAnimationFrame(requestID);
相关文章：