回调在JavaScript中环路引起的问题 [英] Callback in JavaScript loop causes issue

问题描述

我有一个WCF服务（在SharePoint）消费数据的功能。该服务不回，我需要的物品，所以我使用SharePoint客户端对象模型通过使用ID我从WCF服务返回的结果来查询该领域的特定领域。

I have a function that consumes data with a WCF service (in SharePoint). The service does not return a specific field that I need for items so I use the SharePoint Client Object Model to query for the field by using the ID I have in the returned result from the WCF service.

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");
          });
      });
 });

}

当我调试结果在这里，我总是得到项目以相同的顺序返回，但由于GetImageUrl异步执行的项目查询中不以相同的顺序追加。大多数他们必须似乎有些时候是随机的，因为时间获取图像变化的时代：

When I debug result here I always get the items returned in the same order but since the GetImageUrl executes a query async the items are not appended in the same order. Most of the times they do must some times it appears to be random since time to get the image varies:

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但观众更宽这里它更是一个问题，如何使用JavaScript处理这比与SharePoint本身。

I could post this on sharepoint.stackexchange but the audience is wider here and it's more of a question how to handle this with JavaScript than with SharePoint itself.

这是我应该怎么处理这个任何想法？我的想法是这样跳过LoadAllNews（图像），然后当所有的项目都追加使用的JavaScript / jQuery来加载图像的每个新闻项目。

Any ideas on how I should approach this? I was thinking something like skip the image in LoadAllNews() and then when all items are appended use JavaScript/jQuery to load the image for each news item.

先谢谢了。

推荐答案

根据叉函数从我回答这个问题：<一href=\"http://stackoverflow.com/questions/4631774/coordinating-parallel-execution-in-node-js/4631909#4631909\">Coordinating并行执行中的node.js 。我会做这样的：

Based on the fork function from my answer to this question: Coordinating parallel execution in node.js. I would do it like this:

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");
   });
});

叉的实施很简单：

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));
  }
}

上面的

叉函数集异步结果，以便让它正是你想要的。

The fork function above gathers asynchronous results in order so it does exactly what you want.

这篇关于回调在JavaScript中环路引起的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！