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

前もって感謝します...