开始按钮用于启用和恢复动画，而无需在双击时再次重复该功能(javascript）

Start Button to enable and resume an animation without repeating the function again when double clicked (javascript)

本文关键字：javascript 功能 双击 启用 用于 按钮 恢复 动画 开始      更新时间：2023-09-26

我创建了 2 个按钮开始和停止，用于沿特定路径进行粒子模拟。 

<button onclick="start()" id="myButton">Start</button>
<button onclick="stop()">Stop</button>
当我单击"开始"时，动画函数将运行，当我停止时，动画

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

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

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;
  }
}

提前感谢...

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

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;
    }
}
相关文章：