JavaScript 協調非同期メソッド

協調非同期メソッドの種類


JavaScriptの協調非同期メソッドには、
setTimeout()、
setInterval()、
requestAnimationFrame()があります。
いずれも、
特定の時間間隔が経過した後にコードを非同期で実行します。
しかし、
指定された時間は、実行までの最小時間です。
シングルスレッドのスタックが空になるまで実行しないので、
注意する必要があります。

setTimeout()は、
指定時間後に指定されたコードを1回実行し、終了します。

setInterval()は、
指定時間間隔で指定されたコードを繰り返し実行します。

requestAnimationFrame()は、
アニメーションの実行等に使われます。
指定されたフレームレートで、指定されたコードを実行します。
1秒あたりのフレーム数（fps）は60 FPSが標準です。

ゲームでは、
キャラクターをスプライトで作成して、
requestAnimationFrame()でアニメーション化し、
動かします。

協調非同期メソッドの使用例


下記コードは、
setTimeout()の使用例です。



 let myGreeting = setTimeout(function() {
  alert('Hello World!');
}, 5000);



下記コードは、
setInterval()の使用例です。



<body>  
 
<p class="time"></p>
<script>
　function displayTime() {
        let date = new Date();
        let t = date.toLocaleTimeString();   
        document.querySelector('.time').textContent = t;
      }

      displayTime();
      const createClock = setInterval(displayTime, 500);
   </script> 
</body> 


  p {
    font-family: sans-serif;
  }



下記コードは、
requestAnimationFrame()の使用例です。
特殊記号「↻」のスピンを表示します。



<body>  
   <div>↻</div>  
  <script>
    const s = document.querySelector('div');
      let rotateCount = 0;
      let start = 0;
      let rAF;

      function draw(time) {
       
        rotateCount = (time - start) / 3;

         if(rotateCount > 359) {
          rotateCount %= 360;
        　}

        s.style.transform = 'rotate(' + rotateCount + 'deg)';

        rAF = requestAnimationFrame(draw);
      }

      draw(0.03);
    </script> 
 
</body>  


  html {
    background-color: white;
    height: 100%;
  }

  body {
    height: inherit;
    background-color: red;
    margin: 0;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  div {
    display: inline-block;
    font-size: 5rem;
  }
  


以上です。