jQuery無双

jQueryをとことん使いこなす! jQuery1.12対応。使い方、入門、サンプル、ノウハウをとことん極めた最強ブログ。

Deferredその3: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オブジェクト1作成
    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オブジェクト1作成直後に.notify()にて通知する(1回目)
    defer_1.notify("[1]Deferredオブジェクト1作成直後に.notify()にて通知する(1回目)");

    // [2]
    // .notify()にて通知する(2回目)
    defer_1.notify("[2]Deferredオブジェクト1作成直後に.notify()にて通知する(2回目)");

    // [3]
    // Deferredオブジェクト1に.resolve()して解決済みにする
    defer_1.resolve("[3]Deferredオブジェクト1に.resolve()して解決済みにする");
 
    // [4]
    // 解決済みにした後で.notify()にて通知、ただし未解決の状態ではなくなっているので、progressはコールバックされず
    defer_1.notify("[4]解決済みにした後で.notify()にて通知");


    // .notify()と.reject()の組み合わせの検証
    
    // Deferredオブジェクト2作成
    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オブジェクト2に.reject()して解決済みにする
    defer_2.reject("[5]Deferredオブジェクト2に.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サンプルの結果

jquery,deferred,notify,progress,サンプル,非同期通信

 - 非同期通信(ajax) , , , , ,