(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") .on("click",messageWrapper("[async]非同期的なDeferredテスト",function(){ addLog("1.初期処理"); var d = $.Deferred(function(deferred){ // deferred 初期化処理 addLog("2.deferred内初期処理[結果は非同期]"); setTimeout(function(){ deferred.resolve(); },1000); }) .then(function(){ addLog("3.resolve時の処理"); }); addLog("4.外処理"); })) .end(); addLog("このテストはDeferredの実行順序を確認する為のテストです"); addLog("syncボタンで同期的な実行を、"); addLog("asyncボタンで非同期的な実行を行います。"); }); })(jQuery);
<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>
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; }