javascript - 双击时启用和恢复动画而无需再次重复该功能的开始按钮（javascript）

Question

我为沿特定路径的粒子模拟创建了 2 个按钮开始和停止。

<button onclick="start()" id="myButton">Start</button>
<button onclick="stop()">Stop</button>

当我单击开始时，动画功能运行，当我停止时，动画停止，当我单击开始时，它再次从停止的相同位置恢复。我的问题是，当我在动画运行时单击开始按钮时，动画循环会重复，因此每次单击开始时粒子的速度都会增加。

animate 是单击开始时运行的函数。我尝试将属性设置为禁用，但它在第一次单击后完全禁用了开始按钮，但我想用它来恢复我的动画。

function start() {

  requestId = window.requestAnimationFrame(animate);
 //var disable=document.getElementById("myButton").setAttribute("disabled","disabled");
}

function stop() {
  if (requestId){
        clearTimeout(timeInterval);
    window.cancelAnimationFrame(requestId);
        requestId = 0;
  }
}

提前致谢...

Answer 1

将动画状态存储在变量中，并在启动动画之前检查：

var running = false;

function start() {
    if (running) {
        return;
    }
    requestId = window.requestAnimationFrame(animate);
    running = true;
}

function stop() {
    if (requestId) {
        clearTimeout(timeInterval);
        window.cancelAnimationFrame(requestId);
        running = false;
        requestId = 0;
    }
}