【jQuery】Ajaxの処理がすべて終わってから別の処理をさせる方法

今回はjQueryでAjaxの処理をしてその処理がすべて終わってから別の処理を走らせたいときの方法になります。

Ajaxの処理がすべて終わるまで走らせたくない処理がある場合に使えると思います。

ajaxStop

Ajaxの処理がすべて終わってから処理させる方法としてajaxStopを使うという方法があります。

ajaxStopを使うことでAjaxの処理がすべて終わるまで実行されることはありません。

ajaxStopの書き方

jQuery(document).ajaxStop(function() {
//Ajaxの処理がすべて終わってから実行する部分
});

サンプル

わかりやすいようにalertを入れて処理がどのように実行されていくのかを試してみたいと思います。

html

<div id="AjaxStopjs"></div>

jQuery

jQuery(function(){
	jQuery.ajax({
		url: "/matl/ajax_stop/ajax.html",
		type: "get",
		dataType:'html',
	})
	.then(
		function (data) {
			alert('ajax成功');
			console.log('data: ' + data);
			let ajaxData = jQuery(data).find('ul.ajaxitem');
			jQuery('#AjaxStopjs').append(ajaxData);
			alert('ajax終了');
		},
		function () {
			console.log('error');
	});
	
	
	//ajaxの処理が終わってから開始
	jQuery(document).ajaxStop(function() {
		alert('ajaxStop開始');
		jQuery('body').append('<link rel="stylesheet" type="text/css" href="/matl/ajax_stop/style.css">');
		alert('ajaxStop終了');
	});
});

ajaxで取得するデータ

<div class="box">
<ul class="ajaxitem">
	<li>item01</li>
	<li>item02</li>
	<li>item03</li>
	<li>item04</li>
	<li>item05</li>
	<li>item06</li>
	<li>item07</li>
	<li>item08</li>
	<li>item09</li>
	<li>item10</li>
	<li>item11</li>
	<li>item12</li>
	<li>item13</li>
	<li>item14</li>
	<li>item15</li>
	<li>item16</li>
	<li>item17</li>
	<li>item18</li>
	<li>item19</li>
	<li>item20</li>
	<li>item21</li>
	<li>item22</li>
	<li>item23</li>
	<li>item24</li>
</ul>
</div>

処理の流れを解説

処理の流れとしては下記になります。

おもなajaxの処理は

• ajaxの処理が開始
• 「ajax成功」がアラートで画面に表示
• ajaxで取得したデータから「ul.ajaxitem」の要素を取得
• 「#AjaxStopjs」の中にさきほど取得したデータを挿入
• 「ajax終了」がアラートで画面に表示

になります。

次はajaxが終わってからの処理です。

• 「ajax成功」がアラートで画面に表示
• style.cssの読み込みをbodyの中に挿入
• 「ajaxStop終了」がアラートで画面に表示

サンプル