;
(function ($) {
"use strict";
/** jQueryDeferredTimeoutUtilities に於ける deferredMapのテストサンプル
* 使用バージョン:
* jQuery 1.x(edge)
* jQueryDeferredTimeoutUtilities 0.0.1 test version
* https://github.com/juner/jQueryDeferredTimeoutUtilities
* 内容:
* jDTUtilと通常の非同期マップの書き方の違いについてのサンプル
*/
$(function(){
//使用するデータ
var array = [
function () { return $.ajax({type:"POST",dataType:"json", url: "/echo/json/", data: { json:JSON.stringify({key:"test1"}), delay: 8 } }); },
function () { return $.ajax({type:"POST",dataType:"json", url: "/echo/json/", data: { json: JSON.stringify({key:"test2"}), delay: 6 } }); },
function () { return $.ajax({type:"POST",dataType:"json", url: "/echo/json/", data: { json: JSON.stringify({key:"test3"}), delay: 2 } }); },
function () { return $.ajax({type:"POST",dataType:"json", url: "/echo/json/", data: { json: JSON.stringify({key:"test4"}), delay: 10 } }); },
function () { return $.ajax({type:"POST",dataType:"json", url: "/echo/json/", data: {json: JSON.stringify({key:"test5"}), delay: 4 } });}
];
//deferredMapだとこう書く
var $t = $("#target");
$.deferredMap(array, function (v, k) {
return v()
.then(function (data) {
$t.append($("<li/>").text(data.key));
if(data.key ==="test5"){
//test5は除外する
//引数無しでresolveすると配列から除外される
return $.Deferred().resolve();
}else{
return $.Deferred().resolve(data.key);
}
});
})
.done(function (array) {
//値は配列として取得される。
$t.append($("<li/>").css("color", "red").text(array));
});
//従来の書き方だとこう書く
var $o = $("#oldtarget");
(function(_a){
var a = $.map(_a,function(v){
return v()
.then(function(data){
$o.append($("<li/>").text(data.key));
if(data.key === "test5"){
//test5の除外
return $.Deferred().resolve();
}else{
return $.Deferred().resolve(data.key);
}
})
});
return $.when.apply(null,a)
.then(function(){
//concatして空の配列を除外して複数の配列を別別にする
return $.Deferred().resolveWith(null,[[].concat.apply([],arguments)]);
});
})(array)
.done(function(array){
//値は配列として取得出来る様にしておく。
$o.append($("<li/>").css("color", "red").text(array));
});
});
})(jQuery);
<h1><a href="https://github.com/juner/jQueryDeferredTimeoutUtilities">deferredMap</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></dd></dl>
External resources loaded into this fiddle: