デザイナーにも分かりやすいjQuery入門講座|jQueryの使い方

このエントリーをはてなブックマークに追加
索引
Core:コアとなる仕組み
Selectors:セレクタ
Attributes:属性
Traversing:対象の変更
Manipulation:操作
CSS:スタイルシート
Events:イベント
Effects:演出効果
Ajax:xml等との連携
Utilities:ユーティリティ
Data:データ
Miscellaneous:諸々
Deferred:処理管理
Callbacks:コールバック
Internals:内部処理

deferred.fail( )異常終了したら実行する処理を設定

構文

異常終了したら実行する処理を設定返値:deferredオブジェクト
deferred.fail( function [,function] )ver1.5〜

機能

deferredオブジェクト(promiseオブジェクトとjqXHRオブジェクトを含む)に設定された処理が異常終了したら実行する処理を設定します。引数のfunctionは複数設定でき、その場合はカンマで区切って設定します。また複数のfunctionを含んだ配列を利用する事も可能です。

処理が正常終了した時に実行する処理はdeferred.doneメソッドを利用して設定します。

解説

jqXHRオブジェクトに利用する

通信関連のメソッドが返すjqXHRオブジェクトにはpromiseオブジェクトが含まれるので、jqXHRオブジェクトに対してfailメソッドが利用できます。

サンプル(fail/01.html)を開いてbody内にdiv要素とbutton要素があることを確認して下さい。jQueryは以下の様に記述され、2行目のjQuery.getメソッドを利用してサーバ上にあるデータを読み込んでいます。jQuery.getメソッドの返値はjqXHRオブジェクトで、これを変数jqXHRに代入しておきます。

3行目でjqXHRオブジェクトに対しfailメソッドを利用して、処理が失敗した時の処理を設定しています。サンプルではdiv要素に「FAIL!」と表示するようにしています。

$("button").click(function(){
	var jqXHR = $.get("../data/none.txt");
	jqXHR.fail(function (){
		$("div").html("FAIL!");
	});
});

2行目で読み込もうとした「none.txt」は存在しないため通信に失敗します。そのためbuttonをクリックすると、div要素に「FAIL!」と表示されます。

サンプルfail/01.htmlでは分かりやすくjqXHRオブジェクトを変数jqXHRに代入してい利用しましたが、メソッドチェーンを利用してjQuery.getメソッドとfailメソッドを連結することができます。
→参考:サンプル(fail/01b.html

$.get("../data/none.txt").fail(function (){
	$("div").html("FAIL!");
});

関連項目

処理が正常終了した時の設定はdeferred.doneメソッドで設定します。
処理が成功でも失敗でも実行する処理の設定はdeferred.alwaysメソッドで設定します。
処理中の設定はdeferred.progressメソッドで設定します。

メモ

アニメに異常終了は無い?

アニメをstopメソッドで停止したら、異常終了になると思ったのですが、実際は異なりました。
サンプル(fail/test01.html)を開いてbody内にdiv要素と、button要素が2つあることを確認してください(id属性はstartとstop)。

<button id="start">start</button>
<button id="stop">stop</button>
<div></div>

jQueryでは、まずstartボタンをクリックした時の処理を確認してください。以下の様にwhenメソッドで2つのアニメからpromiseオブジェクトを作成し、メソッドチェーンでfailメソッドを連結しています。これでアニメが異常終了したらdiv要素に「FAIL!」と表示されます。

$("#start").click(function(){
	$.when(
		$("div").animate({left:300},1000),
		$("div").animate({top:300},1000)
	).fail(function() {
		$("div").text("FAIL!")
	});
});

続いてstopボタンに設定した処理を確認してください。以下の様にstopメソッドでアニメを停止させます。

$("#stop").click(function(){
	$("div").stop(true,false);
});

実際にstartボタンをクリックして、アニメが終わらないうちにstopボタンをクリックしてアニメを停止させてください。div要素内に「FAIL!」と表示されないことから、アニメを停止しても異常終了と扱われないことが確認できます。

予定していた目的地にたどり着けなくなったわけですから、異常終了としてくれた方が使いようがあると思うのですが...。アニメが異常終了と判断されるケースはあるのでしょうか?