;(function($){
"use strict";
/** jQueryDeferredTimeoutUtilities に於ける deferredEachのテストサンプル(AJAX版)
* 使用バージョン:
* 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 } });}
];
//deferredEach だとこう書く
var $t = $("#target");
$.deferredEach(array,function(k,v){
return v().then(function(data){
$t.append(
$("<li/>").text(data.key)
);
});
})
.done(function(){
//完了後の処理
$t.append(
$("<li/>")
.css("color","red")
.text("finish")
);
});
//従来の書き方だとこう書く
var $ot = $("#oldtarget");
(function test(array){
var a = (array || []).shift();
if(typeof a!== "undefined"){
a().then(function(data){
$ot.append(
$("<li/>").text(data.key)
);
test(array);
})
}else{
//完了後の処理
$ot.append(
$("<li/>")
.css("color","red")
.text("finish")
);
}
})(array.slice());
})
})(jQuery);
<h1><a href="https://github.com/juner/jQueryDeferredTimeoutUtilities">deferredEach</a> 版</h1>
<ul id="target"></ul>
<h1>従来版</h1>
<ul id="oldtarget"></ul>
<dl><dt>解説</dt><dd><p>test1〜test5迄の要素を順番にAJAXするサンプル</p><p>ここではわかりやすい様に取得した時点でリストに表示を行う。</p><p>最後の要素がAJAXで取得された時点で赤字のfinishを表示する。</p></dd></dl>
External resources loaded into this fiddle: