タイマー(setTimeoutとsetInterval)で定期的に処理を行う ～Javascript超初心者入門

Javascriptのタイマー

１度だけのタイマー（setTimeout関数とclearTimeout関数）

タイマーID = setTimeout(実行したい関数, 実行数するまでの時間[ミリ秒]); 関数を使うと指定した時間が経過したら1度だけ関数を実行することができます。

clearTimeout(タイマーID); を使うとsetTimeoutタイマーをキャンセルすることができます。

指定時間毎のタイマー（setInterval関数とclearInterval関数）

タイマーID = setInterval(実行したい関数, 実行数する間隔[ミリ秒]); 関数を使うと指定した時間が経過する毎に関数を実行することができます。

clearInterval(タイマーID); 関数を使うとsetIntervalタイマーを終了させることができます。

１度だけタイマーを使う（setTimeout関数）

「start1」ボタンを押すと５秒後のタイマーが設定され、「stop1」ボタンを押すとキャンセルされます。

<button id="start1">５秒後にalertが表示されます</button>
<button id="stop1" disabled>5秒以内に押すとalertを中止できます</button>

<script>
  var timerId1 = null;  //タイマーID用グローバル変数
  //DOM(Document Object Model)がロードされたら実行
  window.addEventListener("DOMContentLoaded",function(){
    //「start1」ボタンが押されたら実行する
    document.querySelector("#start1").addEventListener("click",function(){
      //5秒経過したら実行する関数
      timerId1 = setTimeout(function(){
        document.querySelector("#start1").removeAttribute("disabled");
        document.querySelector("#stop1").setAttribute("disabled","");
        alert("５秒経過しました");
      },5000);
      document.querySelector("#start1").setAttribute("disabled","");
      document.querySelector("#stop1").removeAttribute("disabled");
    });
    //「stop1」ボタンが押されたら実行する
    document.querySelector("#stop1").addEventListener("click",function(){
      clearTimeout(timerId1);
      document.querySelector("#start1").removeAttribute("disabled");
      document.querySelector("#stop1").setAttribute("disabled","");
    });
  });
</script>

指定間隔毎のタイマーを使う（setInterval関数）

「start2」ボタンを押すと０．０５秒毎のタイマーが設定され、「stop2」ボタンを押すとキャンセルされます。

<button id="start2">0.05秒毎に動きます</button>
<button id="stop2" disabled>停止します</button>
<div style="position:relative;">
  <div id="elm2" style="position:absolute;">ここが動きます</div>
</div>

<script>
  var timerId2 = null;  //タイマーID用グローバル変数
  var x=0, y=0, dx=2, dy=1; //座標用グローバル変数
  //DOM(Document Object Model)がロードされたら実行
  window.addEventListener("DOMContentLoaded",function(){
    //「start2」ボタンが押されたら実行する
    document.querySelector("#start2").addEventListener("click",function(){
      document.querySelector("#start2").setAttribute("disabled","");
      document.querySelector("#stop2").removeAttribute("disabled");
      timerId2 = setInterval(function(){
        x += dx;
        y += dy;
        if(x>100 || x<0){
          dx = -dx;
          x +=dx;
        }
        if(y>20 || y<0){
          dy = -dy;
          y +=dy;
        }
        document.querySelector("#elm2").style.left = x + "px";
        document.querySelector("#elm2").style.top = y + "px";
      },50);
    });
    //「stop2」ボタンが押されたら実行する
    document.querySelector("#stop2").addEventListener("click",function(){
      clearTimeout(timerId2);
      document.querySelector("#start2").removeAttribute("disabled");
      document.querySelector("#stop2").setAttribute("disabled","");
    });
  });
</script>

指定間隔毎のタイマーを使う（setInterval関数）その２

「start3」ボタンを押すと０．０３秒毎のタイマーが設定され、「stop3」ボタンを押すとキャンセルされます。

<button id="start3">0.05秒毎に動きます</button>
<button id="stop3" disabled>停止します</button>
<div style="position:relative;height:8em;">
  <div id="e0" style="position:absolute;left:0em;">こ</div>
  <div id="e1" style="position:absolute;left:1em;">こ</div>
  <div id="e2" style="position:absolute;left:2em;">が</div>
  <div id="e3" style="position:absolute;left:3em;">動</div>
  <div id="e4" style="position:absolute;left:4em;">き</div>
  <div id="e5" style="position:absolute;left:5em;">ま</div>
  <div id="e6" style="position:absolute;left:6em;">す</div>
</div>
<script>
  var timerId3 = null;  //タイマーID用グローバル変数
  var pos=[{y:0, dy:-0.0},{y:0, dy:-0.4},{y:0, dy:-0.0},{y:0, dy:-0.4},{y:0, dy:-0.0},{y:0, dy:-0.4},{y:0, dy:-0.0},{y:0, dy:-0.4},]; //座標用グローバル変数
  //DOM(Document Object Model)がロードされたら実行
  window.addEventListener("DOMContentLoaded",function(){
    //「start3」ボタンが押されたら実行する
    document.querySelector("#start3").addEventListener("click",function(){
      document.querySelector("#start3").setAttribute("disabled","");
      document.querySelector("#stop3").removeAttribute("disabled");
      timerId3 = setInterval(function(){
        for(let i=0;i<7;i++){
          pos[i].dy += 0.1;
          pos[i].y += pos[i].dy;
          if(pos[i].y>40){
            pos[i].dy = -pos[i].dy;
            pos[i].y +=pos[i].dy;
          }
          document.querySelector("#e"+i).style.top = pos[i].y + "px";
        }
      },30);
    });
    //「stop3」ボタンが押されたら実行する
    document.querySelector("#stop3").addEventListener("click",function(){
      clearTimeout(timerId3);
      document.querySelector("#start3").removeAttribute("disabled");
      document.querySelector("#stop3").setAttribute("disabled","");
    });
  });
</script>