jQuery 3 によるDeferred テスト

by juner

HTML

<h1>jQuery 3.0.0 alpha1 によるDeferred テスト</h1>
<button class="sync" type="button">sync</button>
<button class="async" type="button">async</button>
<ul class="log"></ul>
<pre>
呼び出した時に以下の様な処理を実行するものとする
function(){
    // 1.初期処理
    var d = $.Deferred(function(){
        //2.deferred内の処理
        // 同期の場合はその儘resolve
        // 非同期の場合は非同期的にresolveする
    })
    .then(function(){
        //3.resolve時の処理
    });
    // 4.外処理
}
</pre>

CSS

html,body{
    margin:0;
    padding:0;
}
h1{
    margin:0;
    padding:0.1em;
    font-size:1.2em;
    background-color: gray;
    color: white;
}
ul{
    list-style:none;
    padding:0;
}
li{
    margin-top:0.1em;
    margin-bottom:0.1em;
    background-color: black;
    color:white;
    padding:0.1em;
}

JavaScript

(function($){
	$(function(){
        var $log = $(".log");
        var clearLog = function(){
                return $log.promise()
                .then(function(){
                	$log.find("*").remove();
                });
            },
            addLog = function(text){
                $log
                .queue(function(){
                    var $row = $("<li/>").text(text)
                    .css({"opacity":0});
                    $log
                    .append($row);
                    $row.animate({opacity:1},500)
                    .promise()
                    .then(function(){
                        $log.dequeue();
                    });
                });
            },
            messageWrapper = function(title,func){
            	return function(e){
                    e.preventDefault();
                    var $button = $("button");
                    $button.prop("disabled",true);
                    clearLog()
                    .then(function(){
                        addLog(title);
                    })
                    .then(func)
                    .then(function(){
                        $log.promise()
                        .then(function(){
                            addLog("処理終了");
                            $button
                            .prop("disabled", false);
                        });
                    })
                };
            };
        $("button")
        .filter(".sync")
            .on("click",messageWrapper("[sync]同期的なDeferredテスト",function(){
                addLog("1.初期処理");
                var d = $.Deferred(function(deferred){
                    // deferred 初期化処理
                    addLog("2.deferred内初期処理");
                    deferred.resolve();
                })
                .then(function(){
                    addLog("3.resolve時の処理");
                });
                addLog("4.外処理");
            }))
        .end()
        .filter(".async")
           ...