質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

88.19%

$.when.applyがよく分からない

解決済

回答 3

投稿

  • 評価
  • クリップ 0
  • VIEW 4,052

aaaaaaaa

score 481

下記のソースは、ブレイクスルーjavascript100頁に記述されている、サーバー上の画像の読み込み完了を待ってから処理を行うものです。

var deferreds = $("img").map(function(i,el) {
  var deferred = new $.Deferred()
    , img = new Image();//オリジナルの画像取得
  img.onload = function() {
    return deferred.resolve();
  };

  img.onerror = function() {
    return deferred.resolve();
  };

  img.src = el.src;
  return deferred.promise();
});

$.when.apply($,deferreds).then(function() {
  console.log("done!");
});

上記のソースに対していくつか疑問があります。

①mapのコールバック関数内のreturn deferred.promise();は、すべての画像をmap()で加工し終えたあとに実行される処理なのでしょうか。

②なぜapplyの第一引数に$、つまりjqueeyオブジェクトを設定しているのでしょうか。thisの参照先を弄る必要性?を感じる処理ではないように見えますが、何故でしょうか。
とりあえず、何か設定しないといけないので、採用理由は、不明ですが、jqueryオブジェクトを設定したということですか。

③apllyの第二引数に指定したもの(deferreds)は、レシーバオブジェクト(when)に渡す引数ですが、これは、whenに渡された後どうなるのでしょうか。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 3

+2

普通applyは1つめの引数は使わないので
nullでいいんじゃないでしょうか?

$.when.apply(null,deferreds).done(function(){

})

例えばjQueryではない普通のjavascriptだとこう

function sum(){
  var ret=0;
  for(var i=0;i<arguments.length;i++){
    ret+=arguments[i];
  }
  return ret;
}
console.log(sum.apply(null,[1,2,3]));

 追記

ちなみにイメージとしては
$.when.apply($,deferreds).・・・
↓↓↓
$.when(deferreds[0],deferreds[1],deferreds[2],・・・).・・・

みたいなことだと考えればわかりやすいかもしれません

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

+2

②なぜapplyの第一引数に$、つまりjqueeyオブジェクトを設定しているのでしょうか。thisの参照先を弄る必要性?を感じる処理ではないように見えますが、何故でしょうか。

「thisの参照先を弄る必要性はない」のかもしれませんが、.applyを使う以上は指定が必要です。なので、$.when()と呼んだ場合にthis$となるのにあわせて、$を指定しています。

もし$.when()が本当にthisを使うのならこう書かないと動きませんし、逆にthisを参照しなかった場合にも特に害はありません。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

checkベストアンサー

+1

①mapのコールバック関数内のreturn deferred.promise();は、すべての画像をmap()で加工し終えたあとに実行される処理なのでしょうか。

deferred.promise().map()の加工の最終成果物(returnで返している値)です。
(元のコードでは戻り値を格納する変数の名前がdeferredsとなっていますが、promisesのほうが適切です。)

deferred.promise()は単にPromiseオブジェクトを返しているだけであり、何かの処理を実行しているわけではありません。(ソースコード)
Promiseオブジェクトがなんの役に立つかというと、Deferredオブジェクトが.resolve()を呼び出した瞬間に何かの処理を行わせることができます。

var deferred = new $.Deferred();
var promise = deferred.promise();

setTimeout(function() {
    deferred.resolve(42);
}, 3000);

promise.then(function(value) {
    console.log('deferred.resolve() called.');
    console.log(value); // 42
});

jQuery.ajax()は使ったことがありますか?このメソッドの戻り値がPromiseオブジェクトです。

②なぜapplyの第一引数に$、つまりjqueeyオブジェクトを設定しているのでしょうか。

おっしゃる通りthisの参照先をいじる必要性は無いので第一引数は何を設定してもよいです。
なぜならjQuery.when()ではそもそもthisが呼び出されていないからです。(ソースコード)
ただし、これは現時点(v3.3.1)でのコード実装であり、将来的にはthisが呼び出されるようになる可能性はないとは言い切れません。
そうなったときに本に書いたコードが動かなくなるのはまずいのでjQueryオブジェクト(本来thisになるはずだったオブジェクト)を充てたというわけだと思います。

外部ライブラリなどの正体不明の関数に.apply()を使う場合は、第一引数は本来thisになるはずだったオブジェクトを与えるのが無難です。

③apllyの第二引数に指定したもの(deferreds)は、レシーバオブジェクト(when)に渡す引数ですが、これは、whenに渡された後どうなるのでしょうか。

各Promiseオブジェクトに対して.then()でコールバック関数が設定されます。
すべてのPromiseオブジェクトがresolveされると、jQuery.when()の戻り値のPromiseオブジェクトもresolveされます。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 88.19%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る