やってみたJavaScript(0007)：　start/stopボタンを実装

2023年9月23日

やってみたJavaScript、今回はstart/stopボタンを実装するぞ！

割とチョチョイのチョイだ。見た目がショボいから。

test0007

https://www.hircos.work/test/test0007/

レイアウト

というほど何もないけど、canvasとbuttonを横に並べてみた。

あとついでに分かりやすいように背景色を一時的につけた。

body{
    background-color: rgba(200, 200, 200, 1);
}

.canvas{
    background-color: LightBlue;
    float: left;
}

.button{
    background-color: Yellow;
    float: right;
}

#comment {
    clear: both;
}

start/stopボタン

満を持してstart/stopボタンを実装。

    <div class="button">
      <button id="button_start">start</button>
      <button id="button_stop">stop</button>
      <button id="button_clear">clear</button>
    </div>

見た目はとりあえず良しとして、まずは機能を優先ということで。

clearボタンはとりあえず置いといて、start/stopボタンが押されたときの実装はこんな感じにしてみた。

function pushStart( counter, cvs ){
    console.log("pushStart:");

    // avoid the double intervals
    clearInterval( counter );
    
    counter = setInterval( drawCanvas, TIME_INTERVAL, cvs );
}

function pushStop( counter ){
    console.log("pushStop:");
    clearInterval(counter);
}

startボタンを重複して押した場合でも大丈夫なようにpushStartにもclearIntervalを置いてみたが、ダメだった。

一回目のストップは止まる。が、再開以降ボタンが効かない。むしろstartボタンを押すたびにタイマが重複していくように見えますな……。

そもそもsetIntervalの戻り値は、タイマを識別できるIDだそうな。なので試しにsetとclearのIDを見てみる。

function pushStart( counter, cvs ){
    console.log("pushStart:");

    // avoid the double intervals
    clearInterval( counter );
    console.log("pushStart : clearInterval " + counter );
    
    counter = setInterval( drawCanvas, TIME_INTERVAL, cvs );
    console.log("pushStart : setInterval " + counter ); 
}
startボタンを押しまくった時のログ
pushStart : clearInterval 1
script.js:98 pushStart : setInterval 3
script.js:91 pushStart:
script.js:95 pushStart : clearInterval 1
script.js:98 pushStart : setInterval 4
script.js:91 pushStart:
script.js:95 pushStart : clearInterval 1
script.js:98 pushStart : setInterval 5

ということで、clearのほうはいつもID = 1、startのほうはIDがどんどんインクリメントしてるので、タイマがどんどん追加されてるのであった。なんでや！

さらに試しにwindow.onloadにcounterを表示するよう仕込んでみたら、まさにwindow読み込み時にしか実行されないじゃないですか。ここがループしてるのかと勝手に思ってたけど、確かにそうね。

ということで、counterをグローバルにして解決したのであった……。

clearボタンはまた今度ということで。

広告

JavaScript,tec