やりたいこと

現在、setIntervalで動かしているJavaScriptを、requestAnimationFrameに置き換えたいと考えています。

現在の動き

ボタンをクリックしている間（マウスダウンしている間）、ボックスが下に動きます。ボタンダウンを止めると、ボックスの動きが止まります。
現在のままのコードでも問題はないのですが、requestAnimationFrameで代用できないかと考えています。

現在のコード

setIntervalを使用して、希望通り、ボタンを押している間、ボックスが下に動きます。

html
1<!DOCTYPE html>
2<html lang="jp">
3<head>
4	<meta charset="UTF-8">
5	<link rel="stylesheet" type="text/css" href="./css/style.css">
6	<script type="text/javascript" src="./js/main2.js"></script>
7	<title>Document</title>
8</head>
9<body>
10	<button id="down">下</button>
11	<div id="box"></div>
12</body>
13</html>

css
1#box {
2	position: absolute;
3	top: 0;
4	left: 0;
5	width: 40px;
6	height: 40px;
7	background-color: red;
8}
9
10#down {
11	position: absolute;
12	top: 0;
13	left: 200px;
14	width: 100px;
15	height: 30px;
16}

JavaScript
1window.onload = function() {
2	// ボックス
3	let box = document.getElementById('box');
4	let boxRect = box.getBoundingClientRect();
5	let boxTop = boxRect.top;
6	// ボタン
7	let downBtn = document.getElementById('down');
8	let down;
9
10	// 上ボタン
11	downBtn.addEventListener('mousedown', function(e) {
12		if (e.button == 0) {
13			// 20ミリ秒ごとに関数を呼び出す繰り返しタイマー
14			down = setInterval(
15				function() {
16					boxTop += 2;
17					box.style.top = boxTop + 'px';
18				}, 20
19			);
20		}
21	})
22
23	// ボタンを放した時のイベント
24	downBtn.addEventListener('mouseup', function(e) {
25		// 押したボタンが左ボタンの場合の処理
26		if (e.button == 0) {
27			// 繰り返しタイマーを中止
28			clearInterval(down);
29		}
30	})
31}

試したコード

requestAnimationFrameに置き換えました。HTML、CSSは同じなので省略します。
ボタンを押している間も、ボックスが少しだけ下に動いただけで止まってしまいます。

JavaScript
1window.onload = function() {
2	// ボックス
3	let box = document.getElementById('box');
4	let boxRect = box.getBoundingClientRect();
5	let boxTop = boxRect.top;
6	// ボタン
7	let downBtn = document.getElementById('down');
8	let loop;
9
10	// 上ボタン
11	downBtn.addEventListener('mousedown', function(e) {
12		if (e.button == 0) {
13			down();
14			loop = requestAnimFrame(down);
15		}
16	})
17
18	function down() {
19		boxTop += 2;
20		box.style.top = boxTop + 'px';
21	}
22
23	// ボタンを放した時のイベント
24	downBtn.addEventListener('mouseup', function(e) {
25		// 押したボタンが左ボタンの場合の処理
26		if (e.button == 0) {
27			cancelAnimFrame(loop);
28		}
29	})
30}
31
32window.requestAnimFrame = (function() {
33	return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame ||
34		function(callback) {
35			window.setTimeout(callback, 1000 / 60);
36		};
37})();
38
39window.cancelAnimFrame = (function() {
40	return window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame ||
41		function(id) {
42			window.clearTimeout(id);
43		};
44}());

ご教授の程、よろしくお願いします。

行動規範の内容に同意します

回答2件

S.Percentageさんからの回答を基に修正したら、意図した通りに動きました。

JavaScript
1let loop;
2// 上ボタン
3downBtn.addEventListener('mousedown', function(e) {
4	if (e.button == 0) {
5		down();
6	}
7})
8
9function down() {
10	boxTop += 2;
11	box.style.top = boxTop + 'px';
12	loop = requestAnimFrame(down); // ここにrequestAnimationFrameを入れる
13}
14
15// ボタンを放した時のイベント
16downBtn.addEventListener('mouseup', function(e) {
17	// 押したボタンが左ボタンの場合の処理
18	if (e.button == 0) {
19		cancelAnimFrame(loop); // 最初の記載で引数が「down」になっていましたが、「loop」の間違いでした。
20	}
21})

投稿2021/06/13 23:44

tara-tail

総合スコア32

ベストアンサー

requestAnimationFrameは1回しか呼ばれないので、setIntervalのように定期的に呼ばれるようにするにはdownの最後に再度down自身を呼んでもらえるようにrequestAnimationFrameを呼び出す必要があります

https://developer.mozilla.org/ja/docs/Web/API/Window/requestAnimationFrame

投稿2021/06/13 13:16

S.Percentage

総合スコア283

tara-tail

2021/06/13 23:48

S.Percentageさん、ご回答ありがとうございます。リンクまで貼っていただいてありがたいです。 S.Percentageさんの回答をもとに、down関数の中にrequestAnimationFrameを入れたら、意図した通りに動きました。これで合っているかわかりませんが、ひとまず、解決とさせていただきます。

行動規範の内容に同意します

あなたの回答