;(function($){
"use strict";
/** jQueryDeferredTimeoutUtilities に於ける deferredGrepのテストサンプル(AJAX版)
* 使用バージョン:
* jQuery 1.x(edge)
* jQueryDeferredTimeoutUtilities 0.0.1 test version
* https://github.com/juner/jQueryDeferredTimeoutUtilities
* 内容:
* jDTUtilと通常の要素除外のサンプル
*/
$(function(){
//利用するデータ
var array = [
{
key:"test1",
check:function () { return $.ajax({type:"POST",dataType:"json", url: "/echo/json/", data: { json:JSON.stringify({key:"test1"}), delay: 8 } }); },
},{
key:"test2",
check:function () { return $.ajax({type:"POST",dataType:"json", url: "/echo/404/", data: { json: JSON.stringify({key:"test2"}), delay: 6 } }); },
},{
key:"test3",
check:function () { return $.ajax({type:"POST",dataType:"json", url: "/echo/json/", data: { json: JSON.stringify({key:"test3"}), delay: 2 } }); },
},{
key:"test4",
check:function () { return $.ajax({type:"POST",dataType:"json", url: "/echo/json/", data: { json: JSON.stringify({key:"test4"}), delay: 10 } }); },
},{
key:"test5",
check:function () { return $.ajax({type:"POST",dataType:"json", url: "/echo/json/", data: {json: JSON.stringify({key:"test5"}), delay: 4 } });}
}
]
//deferredEach だとこう書く
var $t = $("#target");
$.deferredGrep(array,function(v,k){
return v.check().then(function(data){
//エラーにならなければ追加される
$t.append(
$("<li/>").text(v.key)
);
},function(data){
//エラーになると除外となる
$t.append(
$("<li/>")
.css("color","blue")
.text("error:"+v.key)
);
});
})
.done(function(array){
//完了後の処理
$t.append(
$("<li/>")
.css("color","red")
.text($.map(array,function(v){
return v.key;
}))
);
});
//従来の書き方だとこう書く
var $ot = $("#oldtarget");
(function(_a){
var a = $.map(_a,function(v){
return v.check()
.then(function(data){
//エラーにならなければ追加される
$ot.append(
$("<li/>").text(v.key)
);
return $.Deferred().resolve(v);
},function(){
//エラーになると除外となる
$ot.append(
$("<li/>")
.css("color","blue")
.text("error:"+v.key)
);
return $.Deferred().resolve([]);
});
});
return $.when.apply(null,a)
.then(function(){
//concatして空の配列を除外して複数の配列を別別にする
return $.Deferred().resolveWith(null,[[].concat.apply([],arguments)]);
});
})(array)
.done(function(array){
//完了後の処理
$ot.append(
$("<li/>")
.css("color","red")
.text($.map(array,function(v){
return v.key;
}))
);
});
});
})(jQuery);
<h1><a href="https://github.com/juner/jQueryDeferredTimeoutUtilities">deferredGrep</a> 版</h1>
<ul id="target"></ul>
<h1>従来版</h1>
<ul id="oldtarget"></ul>
<dl><dt>解説</dt>
<dd><p>要素test1~test5までを使用してAJAXを試行し、成功したものを配列として取得している。</p><p>今回のサンプルでは見易い様に、取得した時点でリストに取得された要素についての表示を行う。</p><p>完了時は生成された配列を赤字で文字列として出力している。</p><p>尚、AJAXの試行時にエラーが返ってきた場合は青字でエラーがあった旨を表示する。</p></dd>
</dl>
External resources loaded into this fiddle: