jQueryで、ある処理の『完了後に』を判定できますか？

Question

前提・実現したいこと

jQueryで片方の処理の『完了後に』もう片方の処理を実行すること。

発生している問題・エラーメッセージ

発生している問題としては、
「処理Aの『完了後に』処理Bをする」ができず、
「処理Aの『実行後に』処理Bをする」になってしまう点です。

つまり、実行の順番は指定できても、『完了後に』ができないというところに躓いています。

エラーはありません。

該当のソースコード

まず「whenとdone」を試しましたが、『完了後に』はできませんでした。

$(document).ready(function(){	
	$.when(
		console.log('処理A');
	).done(function(){
		console.log('処理B');	
	});
});

試したこと

続いて試したのが「then」ですが、こちらも『完了後に』はできませんでした。

function execA() {
	var def = $.Deferred();
	console.log('処理A');
	def.resolve();
	return def.promise();  
}
function execB() {
	var def = $.Deferred();
	console.log('処理B');	
	def.resolve();
	return def.promise();  
}
$(document).ready(function(){	
	execA().then(execB);	
});

補足情報（FW/ツールのバージョンなど）

上では「console.log」で出しているためにわかりにくいですが、実際には「autosize」という関数で、テキストエリアの高さを自動調整するものです。

autosize 4.0.2
http://www.jacklmoore.com/autosize/

この計算に時間がかかり計算の前後で高さがカクっとなってしまうために、まず「処理A（autosizeでの高さ計算）」の『完了後に』、「処理B（そのコンテンツを表示する）」という動作を考えているイメージです。

カクっとなる瞬間を隠したいというのが目的になります。

よい方法がございましたら教えてください。

Comments

[maisumakun]

jQueryなしのautosize（http://www.jacklmoore.com/autosize/）で間違いないでしょうか。

[murato]

はい、そちらです。「autosize 4.0.2」ですね。質問を訂正しておきます。ご指摘に感謝致します。

Answer 1

autosizeは、完了後にautosize:resizedイベントを発生させますので、それを拾いましょう。

var $target = $('textarea.some-selector');

// 最初1回だけの実行、ということでone
$target.one('autosize:resized', function(){
  console.log('処理B');
});

autosize($target);

Comments

[murato]

そのようなものがあったとは！ありがとうございます。

Answer 2

命題にあるとおり非同期を待つのはDeferredでできます
複数Deferredを発行すれば多重で処理できます

$(function(){
  var def = Array(4).fill(null).map(function(){return $.Deferred();});
  $.when(execA(def[0],400,'処理400')).then(function(){
    $.when(execA(def[1],300,'処理300')).then(function(){
      $.when(execA(def[2],200,'処理200')).then(function(){
        execA(def[3],100,'処理100');
      });
    });
  });
});

function execA(def,sec,mes) {
  setTimeout(function(){
    console.log(mes);
    def.resolve();
  },sec);
  return def.promise();  
}

Comments

[murato]

遅くなりましてすみません。ありがとうございます。今後の参考にさせて頂きます。