jQueryでanimate()を含む関数の処理が終わるまで待機したい

jQuery 3.1.1 を利用したプログラムで内部に animate() を持つ関数があり、アニメーションは１秒かかるとします。
アニメーションが終わったら alert() などの同期処理を行おうと思いますが、このままではアニメーション開始と同時にメッセージが表示されます。

javascript
1move(100, 0); // 右へ移動
2alert("OK"); // 何らかの処理
3move(0, 100); // 下へ移動
4alert("OK"); // 何らかの処理
5
6function move(x, y){
7    foo.animate({
8        left: (foo.x + x) + "px",
9        top: (foo.y + y) + "px"
10    }, 1000);
11    return [foo.x, foo.y];
12}

アニメーション完了後の処理は通常 animate() の第4引数にコールバックを渡すことで行うと思います。

javascript
1move(100, 0, function(){
2    move(0, 100, function(){
3        alert("OK");
4    });
5});
6
7function move(x, y, callback){
8    foo.animate({
9        left: (foo.x + x) + "px",
10        top: (foo.y + y) + "px"
11    }, 1000, "swing", callback);
12    return [foo.x, foo.y];
13}

動きが増えるにつれて階層はどんどん深くなっていきます。

javascript
1move(x, y, function(){
2    move(x, y, function(){
3        move(x, y, function(){
4            move(x, y, function(){
5                move(...);
6            });
7        });
8    });
9});

見た目にもわかりにくいためもっとスッキリと書きたいのですが、各関数の処理が終わるまでメインスレッドを停止させておきたい場合どのように書くべきでしょうか？

yambejp

2016/11/25 06:36

とりあえずfooが本当にうごくサンプルを提示してもらえませんか？

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

回答2件

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<title>title</title>
5		<meta charset="UTF-8">
6		<meta name="viewport" content="width=device-width, initial-scale=1.0">
7		<style type="text/css">
8			html,body {
9				height: 100%;
10				margin: 0;
11				padding: 0;
12			}
13			#wrap {
14				width: 100%;
15				height: 100%;
16				background: #F6F6F6;
17			}
18			#object {
19				position: absolute;
20			}
21		</style>
22	</head>
23	<body>
24		<div id="wrap">
25			<span id="object">●</span>
26		</div>
27
28		<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
29		<script type="text/javascript">
30			$(function () {
31
32				function doAnimate(obj, css, i) {
33					console.log(i);
34					if (typeof css[i] === 'undefined') {
35						return;
36					}
37					obj.animate(css[i], function () {
38						doAnimate(obj, css, i + 1);
39					});
40				}
41
42				var obj = $('#object');
43				var css = [
44					{
45						top: 100
46						, left: 100
47					}
48					, {
49						top: 0
50						, left: 100
51					}
52					, {
53						top: 100
54						, left: 100
55					}
56					, {
57						top: 0
58						, left: 0
59					}
60				];
61				doAnimate(obj, css, 0);
62			});
63		</script>
64	</body>
65</html>

html
1<!DOCTYPE html>
2<html>
3	<head>
4		<title>title</title>
5		<meta charset="UTF-8">
6		<meta name="viewport" content="width=device-width, initial-scale=1.0">
7		<style type="text/css">
8			html,body {
9				height: 100%;
10				margin: 0;
11				padding: 0;
12			}
13			#wrap {
14				width: 100%;
15				height: 100%;
16				background: #F6F6F6;
17			}
18			#object {
19				position: absolute;
20			}
21		</style>
22	</head>
23	<body>
24		<div id="wrap">
25			<span id="object">●</span>
26			<div id="report">
27
28			</div>
29		</div>
30
31		<script type="text/javascript" src="//ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.1.min.js"></script>
32		<script type="text/javascript">
33			$(function () {
34				function doAnimate(obj, css, i, endcallback, stepcallback) {
35					if (typeof css[i] === 'undefined') {
36						endcallback(i);
37						return;
38					}
39					obj.animate(css[i], function () {
40						stepcallback(css, i);
41						doAnimate(obj, css, i + 1, endcallback, stepcallback);
42					});
43				}
44
45				var obj = $('#object');
46				var css = [
47					{
48						top: 100
49						, left: 100
50					}
51					, {
52						top: 0
53						, left: 100
54					}
55					, {
56						top: 100
57						, left: 100
58					}
59					, {
60						top: 0
61						, left: 0
62					}
63				];
64
65				var endcallback = function (i) {
66					alert(i);
67				};
68
69				var stepcallback = function (css, i) {
70					var res = $('<div>');
71					res.text("#" + i + " top:" + css[i].top + " left" + css[i].left);
72					$("#report").append(res);
73				};
74
75				doAnimate(obj, css, 0, endcallback, stepcallback);
76			});
77		</script>
78	</body>
79</html>

引数をこんなに増やすくらいなら、プラグインにしちゃう方がもっとスッキリするでしょうね。

投稿2016/11/25 06:34

編集2016/11/25 08:05

退会済みユーザー

総合スコア0

workr

2016/11/25 06:53

回答ありがとうございます。動きをまとめてしまうのは良さそうですね。一連の処理が終わった後に alert() を出すなどのアニメーション後の処理をすすめる場合はどのようにすべきでしょうか？

退会済みユーザー

2016/11/25 06:55

自分なりに考えた結果、やってみたことをフィードバックしてください。ただ回答を求めるだけでは、丸投げです。

workr

2016/11/25 07:14

処理の完了は「typeof css[i] === 'undefined'」の時点かと思いますが、そこで自分の出したサンプルのように callback を関数に渡して実行する形にしてしまっては結局は無名関数の入れ子という同じ状況になってしまいます。今回の質問の目的は非同期処理後に同期処理が続く場合ですが、回答していただいたサンプルの中にその部分が無いためよく分かりません。

退会済みユーザー

2016/11/25 07:16

alertを出すだけなら、return;の前に書けば済むことでしょう。

workr

2016/11/25 07:34

質問文がわかりにくかったため少し修正しました。 alert() の箇所には実際にはテキストの書き換えなどのいろいろな同期処理が入ります。アニメーション→同期処理→アニメーション→同期処理のような形を取ります。アニメーション後にどんな処理をするかは箇所によって異なります。

退会済みユーザー

2016/11/25 07:37

アニメーションのステップごとに何らかの処理をやらせたいのであれば、再帰で関数を呼ぶ前に記述すればすみますね。

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

ベストアンサー

処理が完了してからということならば「$.when」というのがあります。
PromiseやDeferredでも検索してみてください。

投稿2016/11/25 06:42

nobinobi

総合スコア199

workr

2016/11/25 07:04

回答ありがとうございます。マニュアルの方確認しました。when() で非同期処理を束ねて完了後に done(function(){...}) を実行するものと解釈しましたが、非同期処理、同期処理が交互に行われる場合、.done() の中に次の処理のための .when() を作り、さらにその .done() のなかに次の処理のための .when() を作るという繰り返しにする形になるのでしょうか？