Deferredその３：notify()、progress()の検証
2016/05/07
notify()、progress()を検証してみる
前回の記事では解決済みと却下による.done()、.fail()へのコールバックの分岐についての検証をしました。
今回は.notify()と.progress()について検証してみたいと思います。
単語として訳すると、notifyは通知とprogressは進捗となり、jQuery.Deferredについても同じようなイメージの用途で使用します。
未解決のDeferredにnotify（通知）をするとコールバックとして.progress()が呼ばれます。
ただし、解決済みと却下の状態になったDeferredにnotify（通知）をしても.progress()は呼ばれません。
notify()、progress()のjQueryサンプル
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<script src="../../js/jquery-1.12.2.min.js"></script>
<script>
$(function(){
// .notify()と.resolve()の組み合わせの検証
// Deferredオブジェクト１作成
var defer_1 = new $.Deferred;
// コード簡略化の為、3つのDeferredコールバックの.progress()と.done()と.fail()をチェーンメソッドで繋ぐ
defer_1.progress(function(data){
msg = "progress()が呼ばれました：" + data;
$("ul").append("<li>" + msg + "</li>");
}).done(function(data){
msg = "done()が呼ばれました：" + data;
$("ul").append("<li>" + msg + "</li>");
}).fail(function(data){
msg = "fail()が呼ばれました：" + data;
$("ul").append("<li>" + msg + "</li>");
});
// [1]
// Deferredオブジェクト１作成直後に.notify()にて通知する（１回目）
defer_1.notify("[1]Deferredオブジェクト１作成直後に.notify()にて通知する（１回目）");
// [2]
// .notify()にて通知する（２回目）
defer_1.notify("[2]Deferredオブジェクト１作成直後に.notify()にて通知する（２回目）");
// [3]
// Deferredオブジェクト１に.resolve()して解決済みにする
defer_1.resolve("[3]Deferredオブジェクト１に.resolve()して解決済みにする");
// [4]
// 解決済みにした後で.notify()にて通知、ただし未解決の状態ではなくなっているので、progressはコールバックされず
defer_1.notify("[4]解決済みにした後で.notify()にて通知");
// .notify()と.reject()の組み合わせの検証
// Deferredオブジェクト２作成
var defer_2 = new $.Deferred;
// コード簡略化の為、3つのDeferredコールバックの.progress()と.done()と.fail()をチェーンメソッドで繋ぐ
defer_2.progress(function(data){
msg = "progress()が呼ばれました：" + data;
$("ul").append("<li>" + msg + "</li>");
}).done(function(data){
msg = "done()が呼ばれました：" + data;
$("ul").append("<li>" + msg + "</li>");
}).fail(function(data){
msg = "fail()が呼ばれました：" + data;
$("ul").append("<li>" + msg + "</li>");
});
// [5]
// Deferredオブジェクト２に.reject()して解決済みにする
defer_2.reject("[5]Deferredオブジェクト２に.reject()して拒否にする");
// [6]
// 拒否した後で.notify()にて通知、ただし未解決の状態ではなくなっているので、progressはコールバックされず
defer_1.notify("[6]拒否にした後で.notify()にて通知");
});
</script>
</head>
<body>
<ul>
</ul>
</body>
</html>
※notify()、progress()のjQueryサンプルの結果と照らし合わせてみると分かりやすいです
[1]Deferredオブジェクト作成直後に.notify()にて通知、.progress()がコールバックされます
[2]再度.notify()にて通知、[1]と同じく.progress()がコールバックされます
[3]そして.resolve()にて解決済みとする、.done()が呼ばれます。
[4]解決済みのDeferredを.notify()にて通知、既に解決済みなので.progress()はコールバックされません
[5]Deferredオブジェクトを作成し、.reject()にて拒否とする、.fail()が呼ばれます。
[6]拒否のDeferredを.notify()にて通知、既に拒否の状態なので.progress()はコールバックされません
notify()、progress()のjQueryサンプルの結果
