Question

我正试图在＆＃34; mousedown＆＃34;上触发动画。一旦释放鼠标，立即停止它。

On＆＃34; mousedown＆＃34;我将标志设置为true，设置单击相应按钮的动画条件。问题在于＆＃34; mouseup＆＃34;我将标志设置为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）。当你将max增加或减少100时，它最终必须以5的增量到达那里。将maxValue设置为当前minValue会停止当前状态的变化。

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

https://jsfiddle.net/nexrytes/

Answer 2

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

requestID = window.requestAnimationFrame(callback);

然后你可以这样取消它：

cancelAnimationFrame(requestID);

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

2 个答案: