0

2 ～ 5 個の適度なサイズのデータ​​ ファイルが読み込まれた後、Web ページに関数を読み込む必要があることがよくあります。最大 5 つのファイルに分割された最大 3MB のデータを考えてみましょう。

次のように、すべての AJAX 呼び出しを同時に行い、すべてが読み込まれた後に initialize() 関数を読み込むことで、読み込み時間を最適化しようとしています。

var data1, data2;
$(document).ajaxStop(function() {
  $(this).unbind("ajaxStop"); //prevent running again when other calls finish
  initialize();
});

$.ajax({
    url: url_to_data_1,
    success: function (d) {
       data1 = d;
    }
});

$.ajax({
    url: url_to_data_2,
    success: function (d) {
       data2 = d;
    }
});

function initialize() { /* do something with data1 and data2 */ }

しかし、毎回これを貼り付けるのにうんざりしているので、次のような関数が必要です:

function multi_Ajax(urls, callback) {
    var data = {};

    //call init() after both the list of prayers and the word concordance index load
    $(document).ajaxStop(function() {
      $(this).unbind("ajaxStop"); //prevent running again when other calls finish
      callback(data);
    });

    for (var c = 0; c < urls.length; c += 1) {
        //data files
        $.ajax({
          url: urls[c],
          dataType: "json",
          success: function (d) {
            data[urls[c]] = d; console.log("Loaded " + urls[c]);
          }
        });
    }    
}

もちろん、ajaxStop がキャッチする ajax 呼び出しが存在しないため、これは機能しません。しかし、私は ajaxStop がどのようにうまく機能するかを理解していません。ありがとうございました！

4

1 に答える 1

1

2 回目の試行がうまくいかない理由がわかりません。ドキュメントによると、ajax リクエストが完了するたびに、jquery は未処理のリクエストが他にあるかどうかをチェックし、リクエストがない場合は ajaxStop を起動します。$.ajax私が知る限り、ループで呼び出すことは、各呼び出しをハードコーディングすることと何ら変わらないはずです。

ただし、バーマーがコメントで示唆した$.whenように、やりたいことを行うためのよりクリーンな方法のようです。配列 (ループで入力できる) を に渡す方法の例を次に示します$.when。$.when() に Deferred の配列を渡します。

後で誰かが来て、ループの前後に無関係な ajax リクエストを追加した場合、 ajaxStop がトリガーされるときに干渉するため、使用$.whenはよりクリーンに見えます。待機する ajax リクエストを明示的に指定できます。$.ajaxStop$.when

編集: ajaxStop がループで発行された複数の呼び出しに対して機能することを示すフィドルは次のとおりです: http://jsfiddle.net/zYk5W/

これが機能しなかった理由は、.ajax または .ajaxStop とは何の関係もないようです。代わりに、成功コールバックのスコープの問題です。成功のコールバックは終了しますがc、これはc外側の (ループ) スコープが使用するものと同じです。いずれかの成功コールバックが実行されるまでに、for ループが完了し、cにインクリメントされますurls.length。したがって、成功コールバックが実行されるたびに、urls[c]未定義になります。リンクしたフィドルまたはループ内の JavaScript クロージャーを参照してください。cループのc.

于 2013-02-14T16:47:52.583 に答える