PhpStormで、ajaxのdone, fail, alwaysの実行順序を確認した

PhpStorm設定

JavaScript Debug

URL:http://localhost:63342/test/test.html

PHP Built-in Web Server

HOST: localhost
Port: 63342
Document root:hogehoge/test

jQuery入門道場から引用

AJAXでは、 見ているページと同じドメイン（同じプロトコル、ポート、ホスト）の サーバと通信しなければならないという決まりがあります。

test.js

function sleepDeferred(ms) {
    "use strict";
    var kind = "Deferred";
    var d = new $.Deferred();
    //if (ms > 2000) {
    setTimeout(function () {
        // statements
        console.log("test.js:%s:resolve", kind);
        d.resolve(kind);
    }, ms);
    return d.promise();
}
function init() {
    "use strict";
    sleepDeferred(3000);
}
init();

testajax.php

  <?php
  session_start();
  sleep(5);
  header("content-type: text/html; charset=utf-8");
  echo "hoge";

test4.html

<script type="text/javascript" >
   function init() {
       //$("#table_area").css("width", $("#table_head").width());
       // scroll連動
       $("#table_area").scroll(function(){
           var off = $(this).scrollLeft();
           $("#head_area").scrollLeft(off);
       });
       $.ajax({
           type: "GET",
           url: "test.js",
           dataType: "script",
           timeout: 10000
       }).done(function () {
           "use strict";
           setTimeout(function () {
               console.log("setTimeout");
           }, 5000);
           console.log("done");
       }).fail(function () {
           "use strict";
           console.log("fail");
       }).always(function () {
           "use strict";
           console.log("always");
       });
       $.ajax({
           type: "GET",
           url: "http://localhost:63342/test/testajax.php",
           dataType: "text",
           timeout: 10000
       }).done(function () {
           "use strict";
           sleepDeferred(0).then(function() { console.log("done"); });
           setTimeout(function () {
               console.log("setTimeout");
           }, 5000);
       }).fail(function () {
           "use strict";
           console.log("fail");
       }).always(function () {
           "use strict";
           console.log("always");
       });
   }
   function sleepDeferred(ms) {
       "use strict";
       var kind = "Deferred";
       var d = new $.Deferred();
       //if (ms > 2000) {
           setTimeout(function () {
               // statements
               console.log("%s:resolve", kind);
               d.resolve(kind);
           }, ms);
       return d.promise();
   }
   $(init);
</script>

テストまとめ

• done, fail, alwaysは$.ajax({})の実行完了を待って実行される PHP内でのsleepはしっかり待つ、つまり、GETの応答を待つ GETしたjsの実行はまたない、つまり応答を検知したら、done(fail), alwaysを実行する
• done(fail)とalwaysは並列実行される