jsのasync/awaitを使ってアニメーション終了後に

Question

JSのasync/awaitを使ってフェードアニメーション完了後にログにOKと出す処理を書いたいのですが、
アニメーションが動いてる最中にOKと出力されてしまいます。
下記の修正すべき点をご指摘いただけませんでしょうか。

<script>
jQuery( function($){
	$(".home .s3 .box").css("position","absolute");
	$(window).on("load scroll resize", function(){
		asyncFunction();
	});

	function promiseIncrement() {
		return new Promise((resolve) => {
			$(".as").each(function(i){
				var imgPos = $(this).offset().top;
				var scroll = $(window).scrollTop();
				var windowHeight = $(window).height();

				if (scroll > imgPos - windowHeight + windowHeight / 3){
					// ここに処理を書く
					$(this).delay(200).css("visibility","visible").animate({opacity: 1}, 1000);
				}
				console.log(i);
			});
			resolve(); //処理が完了したことを通知
		});
	}

	async function asyncFunction(x) {
		// await で Promise の解決を待つ
		const n = await promiseIncrement();
		console.log('OK');
		$(".home .s3 .box").css('position', 'relative');
	}		
});
</script>
			

編集
下記のコードで期待する動作となりました。

$(".home .s3 .box").css("position","absolute");
$(window).on("load scroll resize", function(){
	promiseIncrement();
});


function promiseIncrement() {
	var deferredArr = [];
	$(".as").each(function(i){
		var imgPos = $(this).offset().top;
		var scroll = $(window).scrollTop();
		var windowHeight = $(window).height();

		if (scroll > imgPos - windowHeight + windowHeight / 3){
			// ここに処理を書く
			deferredArr.push( $(this).delay(200*i).css("visibility","visible").animate({opacity: 1}, 1000));
		}
	});

	if( deferredArr.length > 0 ){
		$.when.apply( $,deferredArr ).done(function(){
			console.log('OK');
		});
	}
}
```

Comments

[yambejp]

HTMLも明示ください

[Lhankor_Mhy]

「アニメーションが200msごとでなく一気に実行されるようになりました」とありますが、ぱっと見だと元のコードでも同様ではないですかね……？

[Lhankor_Mhy]

（もしかして、実際のコードでは delay(200*i) と書かれているとか……？）

[Anon_]

あぁ！
まさにその通りですTT
最初に記載したコードが既に間違っておりました・・・。
修正して再度試してみたいと思います。

[Anon_]

修正したコードでいけたと思ったんですが、アニメーションの最中にスクロールすると次の処理がはしってdeferredArrが空になるためなのか、if( deferredArr.length > 0 ){でヒットしなくなってしまいました。
JS難しい・・・。

[Anon_]

アニメーション開始のときに.asの要素にアニメーション開始済を示すクラスを付与してアニメーション開始済の場合は処理をはしらせないようにしようと思いますが、対策としてあっていますでしょうか。

[Lhankor_Mhy]

それもいいとおもうのですが、resizeイベントはまともに受けてしまうと負荷が高いので、↓のようにsetTimeoutかませるのがいいかと思います。
https://w3g.jp/blog/intermittent_event_load_reduce

なお、「次の処理がはしってdeferredArrが空になる」というのは、コードを見る感じでは、なさそうかと思いますし、deferredArr が空の配列でもエラーは起きないんじゃないでしょうか？

[Anon_]

とても参考になりました。
async/awaitについては理解を深めないとまだまだ使いこなせそうにありませんががんばりたいです。
ありがとうございました。

Answer 1

resolveの発火タイミングがおかしいです。

$(this).delay(200).css("visibility","visible").animate({opacity: 1}, 1000);の部分が非同期処理であり、内部的にイベント登録だけして200m秒後に実行してねよろと言って逃げています。
(JavaScriptはシングルスレッドなのでスリープやらビジーループで止めるとブラウザの応答がなくなりプチフリする)
つまり、何の成約もなくポチっと動作させるresolveのほうが先に実行されてしまいます。

イベントループのタイミング的に200msの関数とどっちが先に実行するのかという話になりますが、
最近のJSは優秀なので200ms後ならPromiseのthenのほうが先に動作すると思います。
この辺は「イベントループ」で調べてみてください。

---

さて、実際の解決策

jQueryで、順番に実行が出来る .when() から .done() が便利だったのでメモ

この辺読みながら、doneの中でresolve叩けるように調整しましょう。
jQueryは実行を司るeachではなく、配列を生成するmap→getのルートがあり、Promiseの配列を作りたいならこちらを使うと良いでしょう。
Promiseの配列はPromise.allで全てresolve実行されたら完了するというpromiseに出来るので、やりたい事が実現出来ることでしょう。

Comments

[maisumakun]

jQueryなので、.animate()の配列を$.when.applyで受ける、という流れでもいいかもしれません。

[Anon_]

なんとなく分かりかけているのですが、つまり私がやりたいことはPromiseやawait/asyncを使わずとも$.whenで実現できるという事でしょうか。

[Anon_]

修正しましたがうまく動かないので確認していただけますでしょうか。

[yambejp]

しつこいようですがHTMLの明記を

[Anon_]

すみません、一部コードミスがありました。
今回はPromise.allを使用せずとも実現できましたが、機会があれば使ってみたいと思います。

Answer 2

$(".as").each(...)は、アニメーションの実行開始であり、その後すぐにresolve();を実行していますから、Promiseの解決がアニメーション終了を意味しません。

幸いなことにjQuery.DeferredはPromise-compatibleで、awaitはダックタイピング的な振る舞いをしますので、Promiseを省略して$.when()に直接awaitを書くことができます。ただし、jQueryのバージョンに注意してください

こんな感じで動作するはずです。（動作未確認）

    function promiseIncrement() {
        var deferredArr = [];
        $(".as").each(function(i){
            var imgPos = $(this).offset().top;
            var scroll = $(window).scrollTop();
            var windowHeight = $(window).height();

            if (scroll > imgPos - windowHeight + windowHeight / 3){
                // ここに処理を書く
                deferredArr.push( $(this).delay(200).css("visibility","visible").animate({opacity: 1}, 1000));
            }
        } );
        return $.when( ...deferredArr );
    }

Comments

[Anon_]

whenの中でawaitが書けるとのことですが、提示いただいたコードですと、whenのなかで配列を回してその後、doneでつなげるという流れでしょうか？

[Lhankor_Mhy]

「whenの中でawaitが書ける」ではなくて、
await $.when();
と書ける、ということです。

$.when は、引数にとった $.Deferred が全て終了するのを待って resolve する $.Deferred を返します。なのでこれは、
await $.Deferred();
と同様のことです。

[Anon_]

修正しましたがうまく動かないので確認していただけますでしょうか。
また、ご提示いただいたコードに一部typoがありましたので一応お知らせしておきます。
deffeedArr.pushの箇所です。

[Lhankor_Mhy]

おっと、失礼しました。