わかりやすいJavaScript!-4 ずっと・・
前回で絵文字のりんごを動かしましたが、動きのもとになっているのが
です。
何かを繰り返してやりたい場合に使う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()"。
参考
この記事が気に入ったらサポートをしてみませんか?