“开始”按钮可启用和恢复动画，双击时无需再次重复该功能（javascript）

我已经为粒子模拟沿特定路径创建了两个按钮“开始”和“停止”

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

---

提前感谢…

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

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

---

我尝试了这段代码，但如果我再次单击“停止”，然后再单击“开始”按钮，它不会从停止的位置恢复。“开始”按钮已被完全禁用。您能验证“停止”功能中的“运行”是否设置为“假”吗？我已在“停止”功能中设置了“运行=假”，第一次单击后，“开始”按钮将被完全禁用。

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