前回で絵文字のりんごを動かしましたが、動きのもとになっているのが

です。

何かを繰り返してやりたい場合に使うsetIntervalとsetTimeoutを使うことができます。そのほかrequestAnimationFrameも使うことができます。

"setInterval"は繰り返しを続けます。止める命令がないと止まりません。
"setTimeout"は1回のみ実行します。(使い方により繰り返すことができます。)

もう一つの方法が"requestAnimationFrame"を使うことです。

setInterval

function move(){
  elleft += 1;
  new_element.style.top = `${eltop}px`;
  new_element.style.left = `${elleft}px`;
  
}

setInterval(move, 10);

setIntervalの場合は実行する関数(この場合は"move")と、繰り返すタイミング(この場合"10")を指定します。実行するのは"setInterval(move, 10)"

setTimeout

function move(){
  elleft += 1;
  new_element.style.top = `${eltop}px`;
  new_element.style.left = `${elleft}px`;
 
  setTimeout(move, 10);
}

move()

setTimeoutの場合は関数moveの中に入れ込むことで繰り返しをするようになります。実行するのは"move()"。

requestAnimationFrame

function move(){
  elleft += 1;
  new_element.style.top = `${eltop}px`;
  new_element.style.left = `${elleft}px`;
 
  requestAnimationFrame(move);
  
}

move()

requestAnimationFrameの場合も関数moveの中に入れ込むことで繰り返しをするようになります。実行するのは"move()"。

参考