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

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

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

3回答

9816閲覧

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

aaaaaaaa

総合スコア501

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2018/09/03 09:58

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

javascript

1var deferreds = $("img").map(function(i,el) { 2 var deferred = new $.Deferred() 3 , img = new Image();//オリジナルの画像取得 4 img.onload = function() { 5 return deferred.resolve(); 6 }; 7 8 img.onerror = function() { 9 return deferred.resolve(); 10 }; 11 12 img.src = el.src; 13 return deferred.promise(); 14}); 15 16$.when.apply($,deferreds).then(function() { 17 console.log("done!"); 18});

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

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

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

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

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

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

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

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

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

投稿2018/09/03 12:41

maisumakun

総合スコア145121

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

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

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

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

javascript

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

追記

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

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

投稿2018/09/03 10:07

編集2018/09/03 10:19
yambejp

総合スコア114583

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

ベストアンサー

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

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

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

javascript

1var deferred = new $.Deferred(); 2var promise = deferred.promise(); 3 4setTimeout(function() { 5 deferred.resolve(42); 6}, 3000); 7 8promise.then(function(value) { 9 console.log('deferred.resolve() called.'); 10 console.log(value); // 42 11});

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されます。

投稿2018/09/04 17:50

reosablo

総合スコア339

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問