javascript - JavaScript ループでのコールバックが問題を引き起こす

Question

WCF サービス (SharePoint 内) でデータを使用する関数があります。このサービスは、アイテムに必要な特定のフィールドを返さないため、SharePoint クライアント オブジェクト モデルを使用して、WCF サービスから返された結果にある ID を使用してフィールドをクエリします。

function LoadAllNews() {
var listUrl = "/_vti_bin/ListData.svc/Pages";

$.getJSON(listUrl,
 function (data) {
     $.each(data.d,
      function (i, result) {
          GetImageUrl(result.Id, function (image) {
              $(ConstructHtml(image, result.Title, result.Path, result.Name)).appendTo("#News");
          });
      });
 });

}

ここでデバッグresultすると、常に同じ順序でアイテムが返されますが、GetImageUrl はクエリを非同期で実行するため、アイテムは同じ順序で追加されません。ほとんどの場合、画像を取得する時間が異なるため、ランダムに見える場合があります。

function GetImageUrl(id, callback) {
    var context = new SP.ClientContext();
    var items = context.get_web().get_lists().getByTitle('Pages').getItemById(id);
    context.load(items);

    context.executeQueryAsync(function () {
        callback(items.get_item('PublishingRollupImage'));
    });
}

function ConstructHtml(imageUrl, title, path, name) {
    var html = "" // a long html string..
    return html;
}

これを sharepoint.stackexchange に投稿することもできますが、対象者はここの方が広く、SharePoint 自体よりも JavaScript でこれを処理する方法が問題になります。

これにどのようにアプローチすべきかについてのアイデアはありますか? LoadAllNews() で画像をスキップし、すべての項目が追加されたら、JavaScript/jQuery を使用して各ニュース項目の画像を読み込むようなことを考えていました。

前もって感謝します。

Answer 1

forkこの質問に対する私の答えからの関数に基づいています： node.jsでの並列実行の調整。私はこのようにします：

var getImages = [];
var meta = [];
$.each(data.d,
  function (i, result) {
    getImages.push(function(callback){
      GetImageUrl(result.Id, callback);
    });
    meta.push({
      title : result.Title,
      path : result.Path,
      name : result.Name
    });
});

fork(getImages,function(images) {
  $.each(images,function(i,image){
      $(ConstructHtml(
          image,
          meta[i].title,
          meta[i].path,
          meta[i].name
      )).appendTo("#News");
   });
});

の実装forkは単純にこれです：

function fork (async_calls, shared_callback) {
  var counter = async_calls.length;
  var all_results = [];
  function makeCallback (index) {
    return function () {
      counter --;
      var results = [];
      // we use the arguments object here because some callbacks 
      // in Node pass in multiple arguments as result.
      for (var i=0;i<arguments.length;i++) {
        results.push(arguments[i]);
      }
      all_results[index] = results;
      if (counter == 0) {
        shared_callback(all_results);
      }
    }
  }

  for (var i=0;i<async_calls.length;i++) {
    async_calls[i](makeCallback(i));
  }
}

上記のfork関数は、非同期の結果を順番に収集するため、必要な処理を正確に実行します。

Answer 2

イベントの順序が重要な場合は、同期手順にします