Edit in JSFiddle

;(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: