;(function($){
"use strict";
/** jQueryDeferredTimeoutUtilities に於ける deferredEachのテストサンプル
* 使用バージョン:
* jQuery 1.x(edge)
* jQueryDeferredTimeoutUtilities 0.0.1 test version
* https://github.com/juner/jQueryDeferredTimeoutUtilities
* 内容:
* jDTUtilと通常の非同期ループの書き方の違いについてのサンプル
*/
$(function(){
//利用するデータ
var array = [
"test1",
"test2",
"test3",
"test4"
];
//deferredEach だとこう書く
var $t = $("#target");
$.deferredEach(array,function(k,v){
$t.append(
$("<li/>").text(v)
);
return $.deferredTimeout(1000);
})
.done(function(){
//完了後の処理
$t.append(
$("<li/>")
.css("color","red")
.text("finish")
);
});
//従来の書き方だとこう書く
var $ot = $("#oldtarget");
(function test(array){
var a = (array || []).shift();
if(typeof a!== "undefined"){
$ot.append(
$("<li/>").text(a)
);
setTimeout(function(){
test(array);
},1000);
}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~test4をsetTimeoutで1000ms間隔で出力するサンプル</p><p>ここではわかりやすい様に、時間になるごとに要素をリストに出力する。</p><p>完了した時点で赤字でリストにfinishと出力する。</p></dd></dl>
External resources loaded into this fiddle: