jQuery.when() .done(function() { の使い方がよく解かりません。

デスクトップだと問題ないのですが　パワーの貧弱なスマホだと反応が悪くてユーザビリティーに問題が有るので今回初めて調べて使ってみたのですが上手く行かなくて困ってます。

before

js
1$("select#selecter").on("change",function(){
2		
3		$("#ローディング画像エリア").fadeIn("slow")
4
5		$.ajax({
6			url: 'functions/hogehoge.php',
7			type: 'post',
8			data: {
9				"token": SecurityIdGet(),
10				"value": $(this).val(),
11				},
12			timeout: 2000,	
13			success: function(response) {
14
15                           .....以下省略

セレクトボックスの値が変ったタイミングでローディングエリアを表示
目隠しした状態で　相応の値をDBから引き出して要素を追加して
ローディング画像エリアをフェードアウト..と言う流れにしたいのですが..
セレクトボックスの値を替えてもAjax部分の処理が終わるのを待ってローディングエリアが表示されているらしく..　先に書いた通りパワーの無いスマホやなんかだと値が変ってもローディング画像が表示されるまでフリーズ状態で使い勝手が悪いんです..
そこで　処理に順番を付けようと下記のソースにしてみました..
after

js
1$("select#selecter").on("change",function(){
2		
3	$.when(
4
5		//★ここでエラーになります。
6		$("#ローディング画像エリア").fadeIn("slow");
7
8	).done(function() {
9
10		$.ajax({
11			url: 'functions/hogehoge.php',
12			type: 'post',
13			data: {
14				"token": SecurityIdGet(),
15				"value": $(this).val(),
16				},
17			timeout: 2000,	
18			success: function(response) {
19
20                           .....以下省略