jQueryで、ページを構成する要素を並列で取得しようと考えています。
「/samples/heavy_function_parts1」
「/samples/heavy_function_parts2」
「/samples/heavy_function_parts3」
「/samples/heavy_function_parts4」
「/samples/heavy_function_parts5」
はそれぞれ、sleepして5秒後に現在時刻を返す処理となります。
下記のようなコードを書くと、div「Info5」が更新されるのが、ページ表示後
25秒後となります。
5秒後にすべての情報の更新が完了することを期待しているのですが、
どのように修正すべきでしょうか?
※FirefoxのLive HTTP headersを使ってログを取得してみると、リクエストは
同時に一つしか行われていない(リクエストが完了してから次のリクエストが
行われている)ようです。もしかしてWebブラウザの仕様だったりしますでしょうか?
<script type="text/javascript">
$(function(){
$("#Info1").load("/samples/heavy_function_parts1");
$("#Info2").load("/samples/heavy_function_parts2");
$("#Info3").load("/samples/heavy_function_parts3");
$("#Info4").load("/samples/heavy_function_parts4");
$("#Info5").load("/samples/heavy_function_parts5");
});
</script>
<div id="Info1">情報1</div>
<div id="Info2">情報2</div>
<div id="Info3">情報3</div>
<div id="Info4">情報4</div>
<div id="Info5">情報5</div>
No.3ベストアンサー
- 回答日時:
>loadを並列で実行したとしてもそれはキューにたまるだけであり、通信自体はシリアルで行われているのかなという気もしてきました。
$.load()ではなく、No.1で書かれているように$.ajax()を直接呼び出してみるとどうでしょうか。
(引数の指定の仕方などが変わるようです)
手元にあるver.1.42のコードを読んでみると、戻り値がXHRオブジェクトのようですので、場合によってはXHRオブジェクトを直接操作して、動作確認できるかもしれません。
(別途タイマーを用意して、XHRオブジェクトのreadystateが2や3(通信中)になってるかどうかなど)
なお、複数のリクエストを同時に行うこと自体は可能です。
私は自作ライブラリを使用していますが、4~8個(この個数はブラウザの設定による)まで、同時リクエストが可能です。
私からの情報はこの辺りまでですね。
$.ajax()で作成したXHRオブジェクトを直接.open()や.send()するなどの方法もあるでしょうけど、
そこまで行くとライブラリを使うメリットが無くなるかもです。
No.2
- 回答日時:
以下のいずれかでどうでしょうか?
括弧の対応が間違ってたらすみません、適宜調整してください。
(1)--------------------
<div id="Info1">情報1</div>
<div id="Info2">情報2</div>
<div id="Info3">情報3</div>
<div id="Info4">情報4</div>
<div id="Info5">情報5</div>
<script type="text/javascript">
//window.onloadを待たず、直接呼び出す
$("#Info1").load("/samples/heavy_function_parts1");
$("#Info2").load("/samples/heavy_function_parts2");
$("#Info3").load("/samples/heavy_function_parts3");
$("#Info4").load("/samples/heavy_function_parts4");
$("#Info5").load("/samples/heavy_function_parts5");
</script>
(2)--------------------
<script type="text/javascript">
//$();を5回呼び出す
$(function(){$("#Info1").load("/samples/heavy_function_parts1");});
$(function(){$("#Info2").load("/samples/heavy_function_parts2");});
$(function(){$("#Info3").load("/samples/heavy_function_parts3");});
$(function(){$("#Info4").load("/samples/heavy_function_parts4");});
$(function(){$("#Info5").load("/samples/heavy_function_parts5");});
</script>
<div id="Info1">情報1</div>(以下略)
(3)--------------------
<script type="text/javascript">
//$()ではなく$(document).ready()を使用する
$(document).ready(function(){
$("#Info1").load("/samples/heavy_function_parts1");
$("#Info2").load("/samples/heavy_function_parts2");
$("#Info3").load("/samples/heavy_function_parts3");
$("#Info4").load("/samples/heavy_function_parts4");
$("#Info5").load("/samples/heavy_function_parts5");
});
</script>
<div id="Info1">情報1</div>(以下略)
(4)--------------------
<script type="text/javascript">
//$(document).ready()を5回呼び出す
$(document).ready(function(){$("#Info1").load("/samples/heavy_function_parts1");});
$(document).ready(function(){$("#Info1").load("/samples/heavy_function_parts1");});
(字数制限により以下略)
>No.1
何秒後に更新するのではなく、「5つのリクエストを同時に行う」のが目的だと思います。
1~4のそれぞれについて試してみました。
結果はどれも同じで、前のリクエストの結果を受信してから次のリクエストが行われるという形で、時間はどれも25秒かかることとなりました。
ちょっと調べてみるとjavascript自体はシングルスレッドとのことで、loadを並列で実行したとしてもそれはキューにたまるだけであり、通信自体はシリアルで行われているのかなという気もしてきました。
No.1
- 回答日時:
jQueryの$.load()は、同じくjQueryの$.ajax()のラッパーのはずです。
$.ajax()では、デフォルトでasync:true (非同期)です。つまりそれぞれの通信を待たずにレスポンスを受信しだい、それぞれのコールバック関数が非同期に実行されます。
クライアント側とサーバー側のオーバーヘッド時間及び通信回線のスループットによって処理完了までの時間は毎回異なります。
従いまして、ご質問のような、「5秒後にすべての情報の更新が完了することを期待」を実装は不可能ではないでしょうか...
オーバーヘッド等があるのは承知しています。
5秒を多少超えてもかまいません。
少なくとも上記コードでは非同期処理にも関わらず、通信部分においては前の通信が完了するまで待機しているように思えます。
回避する手段があればお教えいただければと思います。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/07 21:04
- JavaScript javascriptで移動ボタンを押した際に遷移するボタンを追記したい 1 2022/11/29 03:02
- JavaScript 画像の表示位置 3 2022/12/23 08:25
- JavaScript jqueryを使ったスムーススクロールのコードを書いたのですが、HTMLコード内にある、a butt 2 2022/04/14 10:59
- JavaScript jQueryでのドラッグアンドドロップについて 1 2022/07/30 09:10
- JavaScript 【Javascript】ボタンクリックで2つのclassに対し、それぞれ別のclassを追加したい 1 2022/07/29 20:52
- JavaScript プログラムがうまく動きませんレビューお願いします 1 2022/07/10 05:08
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- JavaScript 入力フォームの javascript で メールアドレスの正規チェックをを行い、ボタンをクリックして 2 2022/04/27 16:06
- JavaScript ①入力フォーム→②確認表示画面→③送信完了画面のコードを書いているのです、 入力フォームから受け取っ 2 2022/05/10 16:45
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
繰り返し処理のシンプルな書き方
-
Selenium4でボタンをクリックで...
-
階層別の組織図の自動作成について
-
EUC-JPに対応しているjQueryを...
-
マスターページ使用時のJavascript
-
JQueryの変数の扱いで弱ってい...
-
struts selectbox optionsColle...
-
Selenium Basicの件
-
Ajax・jQueryでGETとPOSTする方法
-
Googleストリートビューの写真...
-
jQueryのblockUIをformのボタン...
-
プルダウン内容に応じてラジオ...
-
Google Apps Scriptを利用した...
-
ajaxからphpにpsotしたときの日...
-
jQueryを使いformでsubmitした...
-
セッション
-
JavascriptからPHPへのAjax通信...
-
jqueryについて、$("+dd",this)...
-
SQLのmaxで求めた値を変数に代...
-
jquery.csv2table.jsに検索窓
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
要素内を常に一番下を表示させたい
-
ローカルでのonreadystatechang...
-
jQueryで、複数条件の絞り込み機能
-
jqueryを使って非同期通信で10...
-
jqueryのgetでJSPを呼び出したい
-
Jquery で on/offボタンの実装...
-
JQueryでAjax通信をキャンセル...
-
jQuery 並列load処理
-
JavascriptからPHPへのAjax通信...
-
Javascriptを使ってQRコード読...
-
Selenium4でボタンをクリックで...
-
jQueryを使いformでsubmitした...
-
同一ページ移動時ハンバーガー...
-
階層別の組織図の自動作成について
-
JavaScriptでtabindexの変更っ...
-
Googleマップに複数のピンを立...
-
SQLのmaxで求めた値を変数に代...
-
パソコンで動くjavascriptがス...
-
readyStateが4にならない原因
-
AjaxでJSONを受信すると、文字...
おすすめ情報