わかりやすいJavaScript！-7 動かそう！

donguri

2024年1月26日 05:54

ライブラリを使話ない普通のJavaScriptで動かす命令としとよくt飼われているのが、

setInterval()
function で指定した関数を delay ミリ秒ごとに繰り返し実行します。
setTimeout()
function で指定した関数を delay ミリ秒後に実行します。

があります。そして別の方法として

requestAnimationFrame(callback)
アニメーションを実行することをブラウザーに通知し、次の再描画の前にアニメーションを更新するため、ブラウザーが指定の関数を呼び出すように要求します。

があります。その違いなどを見ていきます。

setInterval

通常は一定時間ごと実行。この場合だと1000mm秒後(1秒後)ごとに連続してcountUp()を実行します。

<script>
  let count = 0;
  function countUp(){
    console.log(count++);
  }
   setInterval(countUp, 1000);
</script>

setInterval(関数, ミリ秒);

countUp()については以下

function countUp(){
　　console.log(count++);
}

は変数countで定義されている数字"0"に"1"ずつ加算していきます。1,2,3・・・　という感じにコンソールに出力されます。

setTimeout

通常は一定時間後、この場合だと1000mm秒後(1秒後)にcountUp()を実行します。

<script>
  let count = 10;
  function countUp(){
    console.log(count);
  }
  
 setTimeout(countUp, 5000);
  
</script>

setTimeout((関数, ミリ秒);

setIntervalのように一定時間ごとで連続して実行したい場合

<script>
  let count = 0;
 
　 function countUp(){
    console.log(count++);
    
    setTimeout(countUp, 1000);
  }
  
  countUp()
  
</script>

とすればできます。

requestAnimationFrame

より問題なくアニメーションを行うことができるものとなっています。

 <script>
  
  
  let count = 0;

  function countUp(){
    console.log(count++);
      
      requestAnimationFrame(countUp);
   
  }
  
countUp()
  
 
  </script>

requestAnimationFrame(関数);

使い方はsetTimeoutと同じで関数の中に入れて使います。

参考

<body>
<canvas id="myCanvas" width="480" height="320"></canvas>
</body>

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var x = canvas.width/2;
var y = canvas.height-30;
var dx = 2;
var dy = -2;

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, 10, 0, Math.PI*2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    x += dx;
    y += dy;
  
  requestAnimationFrame(draw);
  
//   setTimeout(draw,10) でも同じことができます
}

draw()

この記事が気に入ったらサポートをしてみませんか？