jQueryのfadeOut系処理を連続すると発火しない

Question

###実現したいこと
正しい順序でfadeOut系処理を実現したいです。

###発生している問題
以下jQueryについて、「お気に入りスレッド」を連続クリックすると、正しい順序で処理されず苦慮しております。

###操作画面
操作画面はこちらになり、右の「お気に入りスレッド」をクリックした際の処理が問題です。

###コンソール画面
上の「お気に入りスレッド」をクリックすると下図の上の４つが１セットでコンソール画面に表示されます。
しかし連続クリックしているうちにこの４つの順序が狂い、下図の下の２つのようになってしまうのです。

###該当のソースコード
長いコードとなっておりますので、まず実行可能なサンプルをjsfiddleでご用意いたしました。
https://jsfiddle.net/bq0v4wyz/

<div class="wrapper">
	<div class="main">
		<div class="pagename">スレッド</div>
		<h2 class="title" data-path="/threads/thread1/posts">カレーについて</h2>
		<ul class="menu">
			<li data-menu="posts" class="is_active">コメント</li>
			<li data-menu="followrs">フォロワー</li>
		</ul>
		<ul class="comments">
			<li>おいしい</li>
			<li>すき</li>
		</ul>
	</div>
	<div class="favorites">
		<p>お気に入りスレッド</p>
	<ul>
		<li data-path="/threads/thread2/posts">ケーキについて</li>
		<li data-path="/threads/thread3/posts">ジャムについて</li>
		<li data-path="/threads/thread4/posts">鍋について</li>
	</ul>
	</div>
</div>

.wrapper {
	position: relative;
	display: flex;
	justify-content: space-evenly;
}
.wrapper > div {
	position: relative;
	width: 50%;
	padding: 20px;
}
ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
p {
	margin: 0;
}
.title {
	margin: 0;
}
.menu {
	display: flex;
}
.menu > li {
	margin: 0 10px 0 0;
}
.menu > li.is_active {
	border-bottom: 1px solid black;
}
.menu {
	margin: 10px 0 10px 0;
}
.canopy {
	font-weight: bold;
	font-size: 1.5em;
}
.comments li,
.favorites li {
	background: pink;
	padding: 5px;
	margin: 5px 0 0px 0;
	text-align: center;
}
.favorites {
	background: #CCF;
	padding: 10px;
}
.favorites li {
	cursor: pointer;
}
.loader {
	position: absolute;
	top: 0; right: 0; bottom: 0; left :0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #eee;
	z-index: 2;
}

// リンクをクリックしてpjaxで遷移
$(document).on('click','[data-path]', function(){
	console.log('%cクリックしました','color:red;');
  
	// 現在ページデータ
	const currentPath = $('.title').data('path'),
	currentTitle = $('.title').text(),
	currentPagename = currentPath.split('/')[1];
	
	// 遷移先ページデータ
	const targetPath = $(this).data('path'),
	targetTitle = $(this).text(),
	targetPagename = targetPath.split('/')[1];
	
	// ページデータ
	const data = {
		target : {path:targetPath, title:targetTitle, pagename:targetPagename},
		current: {path:currentPath,title:currentTitle,pagename:currentPagename},
	};

	// ページ遷移を実行
	$('.main').prepend('<div class="loader">読込中</div>');
	fadeMain( data );
	pjaxMain( data );
});	

// .main エリアのフェード
function fadeMain( data ){
	const $fadeAreas = getFaeAreas( data );
	$fadeAreas.fadeOut(1000).promise().done( function () {
		console.log('フェードアウト処理');

		// pagename 入れ替え
		const pagenameJa = data.target.pagename === 'threads' ? 'スレッド' : 'ユーザー';
		$('.pagename').html( pagenameJa );

		// title 入れ替え
		const title = data.target.title;
		$('.title').html(title);
		console.log('title =',title);
		const path = data.target.path;
		$('.title').data('path',path);

		// 入れ替え終わったものを表示
		$('.title, .pagename').fadeIn(200); 

	});
}

// .mainエリアのpjax
function pjaxMain( data ){
	const funcArr = getFuncArr( data );
	$.when.apply(null, funcArr).then(
		function( resFuncArr ){
			//console.log('resFuncArr =', resFuncArr);
			console.log('ここで履歴を保存');
		}
	);
}

// pjax時の関数を取得
function getFuncArr( data ){
	let funcArr = [];
	const func = $.when( ajaxComments() ).done( function( comments ){
		insertComments( comments, data )
	});	
	funcArr.push( func );	
	return funcArr;
}

// ajaxでコメントを取得してくる
function ajaxComments(){
	const d = $.Deferred(); 
	setTimeout(function() {
		const array = ["すき","おいしい","まずい","きらい","まぁまぁ","めっちゃすき"];
		const comments = array.slice().sort(function(){ return Math.random() - 0.5; }).slice(0, 2);
		d.resolve( comments );
	}, 1000);
	return d.promise();	
}

// コメントをHTMLに挿入
function insertComments( comments, data ){
	let html = '';
	comments.forEach(function( comment ){
		html += `<li>${comment}</li>`;
	})
	$('.comments').html( html );
	insertCommentsAfter( data );
}

// コメント挿入後の処理
function insertCommentsAfter( data ){
	const $fadeAreas = getFaeAreas( data );
	$fadeAreas.fadeIn(200).promise().done( function () {	
		$('.loader').remove();		
	});
}

// フェードエリアの取得
function getFaeAreas( data ){
	let $fadeAreas;
	if( data.current.path === data.target.path ){
		// 同じスレッドで.menuの変更の場合[
		$fadeAreas = $('.comments');
	}else{
		// 別スレッドの場合
		$fadeAreas = $('.title, .pagename, .menu, .comments');  
	}
	return $fadeAreas;
}

###試したこと1
アニメーションがうまく作動していないようなので、fadeOut()やfadeIn()の前に.stop()を置いてみましたが変化ありませんでした。

$fadeAreas.fadeOut(1000).promise().done( function () {
↓
$fadeAreas.stop().fadeOut(1000).promise().done( function () {

$fadeAreas.fadeIn(200).promise().done( function () {	
↓
$fadeAreas.stop().fadeIn(200).promise().done( function () {	

###試したこと2
あとは次のように関数の前にまとめて.stop()を置いてもみましたがこれもダメでした。

// リンクをクリックしてpjaxで遷移
$(document).on('click','[data-path]', function(){
	
	/*--- 省略 ---*/
	
	// 関数の前にまとめてstop
	const $fadeAreas = getFaeAreas( data );
	$fadeAreas.stop();

	// ページ遷移を実行
	$('.main').prepend('<div class="loader">読込中</div>');
	fadeMain( data );
	pjaxMain( data );
});	

###補足
jQeuryは3.4.1です。

現状の関数は削除せずに実現したいです。（質問のためにミニマムなコードにしていますが、実際にはいろいろな処理が絡んでいるためです。）

思い当たるポイントございましたらアドバイス宜しくお願い致します。

Answer 1

どこがどうなればイイのかちょっと判断がつかないですが
queue/dequeueで処理できませんか？