【JavaScript】非同期制御が出来ない

Question

B.jsにおいてはajaxの非同期制御は可能ですが、A.jsからB.jsを呼び出した際ににA. jsで非同期制御が出来ない状態です。
(doneの箇所にB.jsの実行が完了する前に到達してしまう。)

when～doneの記載方法に問題があるのか不明な状況です。
対応方法についてご教示頂きたいです。

A.js
function test(){
$.when(
test.search.textSearch('test', 1, null, null, null)
).done(function(data_a) {
return data_a;
});
}

B.js
test.search = (function() {
// テキスト検索
var textSearch = function(search, pageNo, treeNo, id, column) {
params = {"search": search,
"pageNo": pageNo,
"treeNo":treeNo,
"id":id
};
$.ajax({
type: "POST",
url: 'search/testSearch',
data: params,
dataType: 'jsonp',
jsonpCallback: 'callback',
}).done(function(json){
if(json.data && json.data.length ! = 0) {
return json.data;
}
});
};

Answer 1

B.jsの下の部分が切れているようですので、その部分で何かしらしているのかもしれませんが、提示されている状態で終了だとすると、そもそもtest.searchがundefinedなので、test.search.textSearch('test', 1, null, null, null) でエラー起こしていませんか？

test.search.textSearchで実行させたいならB.jsは下記のような感じになるかと思います。

test.search = (function() {
  return {
    // テキスト検索
    textSearch: function(search, pageNo, treeNo, id, column) {
      params = {
        "search": search,
        "pageNo": pageNo,
        "treeNo":treeNo,
        "id":id
      };
      $.ajax({
        type: "POST",
        url: 'data.json',
        data: params,
        dataType: 'json',
        jsonpCallback: 'callback',
      })
      .done(function(json){
        if(json.data && json.data.length !== 0) {
          return json.data;
        }
      });
    }
  };
})();

jQuery.when

jQuery.when()

jQuery.when( deferreds )
deferreds
Type: Deferred
One or more Deferred objects, or plain JavaScript objects.

公式ドキュメントではこのようになっています。
また、こちらの例 jQuery.DeferredとかjQuery.whenの使い方について ではjQuery.whenは下記のようになっています

var hoge = $.ajax({
    url : "~" ,//{"text" : "hoge"}を返すAPIとする
    type : "GET",
    dataType : "json"
});

var fuga = $.ajax({
    url : "~" ,//{"text" : "fuga"}を返すAPIとする
    type : "GET",
    dataType : "json"
});

$.when(hoge, fuga).done(function(data1, data2){
    console.log(data1[0].text); //hoge
    console.log(data2[0].text); //fuga
});

その上で実行しようとしていた関数test.search.textSearchを見てみると、普通のfunctionですので、A.jsの$.when()内で呼び出したtest.search.textSearchがundefinedを返して終了した段階で、done()が実行されます。
$.when()内で呼び出した関数のAjaxの処理が完了してからdone()に進めたい場合は、呼び出す関数がDeferred objectsを返すようにしなければダメかと思います。
問題のコードの場合は $.ajax()をreturnしてしまえば良いかと思います。

// B.js
test.search = (function() {
  return {
    // テキスト検索
    textSearch: function(search, pageNo, treeNo, id, column) {
      params = {
        "search": search,
        "pageNo": pageNo,
        "treeNo":treeNo,
        "id":id
      };
      // ajaxをreturnする
      return $.ajax({
        type: "POST",
        url: 'data.json',
        data: params,
        dataType: 'json',
        jsonpCallback: 'callback',
      })
      .done(function(json){
        if(json.data && json.data.length !== 0) {
          return json.data;
        }
      });
    }
  };
})();

※ ただし、ajaxを返す方法だとB.jsのajax完了時に恐らくdeferred.resolveが自動的に実行されるのでしょう。A.jsのdone()で受け取れる引数data_aは returnで指定されたjson.data ではなくjson になります。

jQuery.when().done()に加工した引数を渡したい場合

Ajaxで取得した値を加工して渡したい場合はtest.search.textSearchはdeferred.promise()を返して、deferred.resolve()を使って引数を渡すようにする必要があるかと思います。

// B.js
test.search = (function() {
  return {
    // テキスト検索
    textSearch: function(search, pageNo, treeNo, id, column) {
      params = {
        "search": search,
        "pageNo": pageNo,
        "treeNo":treeNo,
        "id":id
      };
      var defer = $.Deferred();
      $.ajax({
        type: "POST",
        url: 'data.json',
        data: params,
        dataType: 'json',
        jsonpCallback: 'callback',
      })
      .done(function(json){
        if(json.data && json.data.length !== 0) {
          // defer.resolve を使ってA.jsのdone()に引数を渡す
          defer.resolve( json.data );
        }
      });
      // defer.promiseを返す
      return defer.promise(this);
    }
  };
})();

jQuery.when()を使わなくても良いかも。

こうするとtest.search.textSearch()はDeferred Objectを返しちゃっているので、A.jsで複数の非同期書処理を行いたいのでなければ、jQuery.whenを使わずに単純に下記のように書いてしまってもOKです。

// A.js
function test(){
  test.search.textSearch('test', 1, null, null, null)
   .done(function(data_a) {
      return data_a;
   });
}

Comments

[ryozn]

分かり易い回答ありがとうございました。
会社で確認後、実際に試したところ動作出来ました。