JQuery.Deferredを使ってみた

JQuery.Deferredは非同期処理における成功/失敗/中間報告のフレームワーク。だと思う。

成果物

JS.JQuery.Deferred.201706061335

開発環境

• Linux Mint 17.3 MATE
• Firefox 52.0
• JQuery 3.2.1

参考

すでにわかりやすい記事がたくさんある。感謝。

• http://qiita.com/yuku_t/items/1b8ce6bba133a7eaeb23
• http://qiita.com/yuku_t/items/1b8ce6bba133a7eaeb23
• http://www.tohoho-web.com/js/jquery/deferred.htm
• JQuery API
  • Deferred
    • http://api.jquery.com/Types/#Deferred
    • http://api.jquery.com/category/deferred-object/

JQuery.Deferred

JQuery.Deferredは非同期処理における成功/失敗/中間報告のフレームワーク。だと思う。コールバック地獄を回避できる。非同期処理における現実的な実装をするために必要不可欠なフレームワーク。

func関数の成否によって処理を分岐する

var func = function() {
    var dfd = $.Deferred();
    // なにかの処理
    dfd.resolve('Deferred!!'); // 失敗時はdfd.reject()。
    return dfd.promise();
};
func()
    .done(function(data) { alert(data); }) // resolve実行時
    .fail(function () { alert('fail'); }); // reject実行時

1. funcで任意の処理を行う
2. 処理の成否を$.Deferred.resolve(), $.Deferred.reject()で指定する
3. $.Deferred.done(), $.Deferred.fail()で成否事の処理をする

成否問わず実行する

var func = function() {...}
func()
    .always(function () { alert('fail'); }); // resolveまたはreject実行時

• always()は成否がどちらでも実行する

複数の関数を順次実行

var func1 = function() {...};
var func2 = function() {...};
var func3 = function() {...};
func1()
    .then(function() {return func2();})
    .then(function() {return func3();})
    .done(function(data) { alert(data); }) // resolve実行時
    .fail(function () { alert('fail'); }) // reject実行時

• func1, func2, func3 の順に実行する

複数の関数を並列実行

var func1 = function() {...};
var func2 = function() {...};
var func3 = function() {...};
$.when(func1, func2, func3)
    .done(function(data) { alert(data); }) // resolve実行時
    .fail(function () { alert('fail'); }); // reject実行時

• 同時に実行する
• すべてがresolveならばdoneを実行する
• ひとつでもrejectがあればfailを実行する

中間報告する

var func = function() {
    var dfd = $.Deferred();
    // なにかの処理
    dfd.notify(); // progress()コールバックを呼び出す
    dfd.resolve('Deferred!!'); // 失敗時はdfd.reject()。
    return dfd.promise();
};
func()
    .progress(function() { alert('progress'); }); // notify実行時
    .done(function(data) { alert(data); }) // resolve実行時
    .fail(function () { alert('fail'); }); // reject実行時

• 成否確定までの間、progress()を呼び出す