jQuery - Deferredオブジェクト

Deferredオブジェクトは、時間がかかる処理の進行状態に応じてcallback関数を設定できるために用意されている。

生成

jQeury.Deferred()

done(doneCallback) : 成功時
fail(failCallback) : 失敗時
progress(callback) : 進行中
always(doneCallback[,failCallback]) : 成功時と失敗時
then(doneCallback, failCallback[,progressCallback]) : 成功時、失敗時と進行中
promise([target]) : Deferredオブジェクトの複写かつ状態変更できないようにする。target指定の場合、DeferredのIFを追加。
notify(args) : progress()を呼び出す、argsは引数
resolve(args) :　状態をresolved(成功)に変更し、doneCallbackが呼ばれる
reject(args) : 状態をrejected(失敗)に変更し、failCallbackが呼ばれる
resolve(context[,args]) : resolve(args)と基本同じだが、context引数が多い
notifyWith(context[,args]) : notify(args)と基本同じだが、context引数が多い
rejectWith(context[,args]) : reject(args)と基本同じだが、context引数が多い
state()
- pending : 途中
- resolved : 成功
- rejected : 失敗

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> Deferred </title>
</head>

<body>
    <script type="text/javascript" src="jquery-1.12.0.min.js">
    </script>
    <script type="text/javascript">
        var calPrime = function(start, end) {
                // Deferred生成
                var dfd = $.Deferred();
                try {
                    var result = "";
                    // 素数検索
                    search:
                        for (var n = start; n <= end; n++) {
                            for (var i = 2; i <= Math.sqrt(n); i++) {
                                if (n % i == 0) {
                                    continue search;
                                }
                            }
                            // 結果
                            result += (n + ",");
                        }
                        // 成功状態に変更
                    dfd.resolve(result);
                } catch (e) {
                    // 失敗状態に変更
                    dfd.reject("なんか失敗したな");
                }
                return dfd.promise();
            }
            // 
        calPrime(1, 1000000)
            // 成功時
            .done(function(result) {
                $("body").append(result);
            })
            // 失敗時
            .fail(function(result) {
                $("body").append(result);
            });
    </script>
</body>

</html>

jQuery.when(deferreds)

複数の非同期処理が全部終了した際のdoneCallbak,failCallbackを指定できる。

$.when(
  deferred1,
  deferred2,
  deferred3
)
.done(function(data1, data2) {
  // すべて成功した場合
  console.log(data1, data2);
})
.fail(function() {
  // 一つでもエラーの場合
  console.log('error');
});

Defferred.promiss(target)

通常オブジェクトにDefferredのインタフェースを追加する。

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title> Deferred </title>
</head>

<body>
    <script type="text/javascript" src="jquery-1.12.0.min.js">
    </script>
    <script type="text/javascript">
        var obj = {
            print: function(name) {
                document.write(name + "おはよ！<br/>");
            }
        };
        // Defferedオブジェクト
        var defer = $.Deferred();
        // objにDefferedインタフェース追加
        defer.promise(obj);
        // 
        obj.done(function(name) {
            obj.print(name);
        }).done(function(name) {
            document.write("成功時callback２回目<br/>");
        }).done(function(name) {
            document.write("成功時callback３回目<br/>");
        }).done(function(name) {
            document.write("doneは複数回実装できるよ！");
        });;
        // 成功状態にする
        defer.resolve("あいうえお");
    </script>
</body>

</html>

f:id:liguofeng29:20160222214051p:plain

liguofeng29’s blog

個人勉強用ブログだっす。

jQuery - Deferredオブジェクト