javascript - AngularJS 将变量传递到循环异步回调中

Question

我有一个函数，它循环遍历不确定数量的项目，并对每个项目进行异步调用以获取附加数据(html 模板文件的内容)。回调会进行一些检查。生成的函数应该是可用的。 $q 是之前注入(inject)的，此代码是工厂的一部分。

function searchHelpTopics(topics, searchPhrase) {
    if (topics == null || topics.length == 0) return "No search results";
    var results = [];
    var promises = [];
    for (var i = 0; i < topics.length; i++) {
        var templateURL = topics[i].URL;
        var topic = topics[i];
        if (topics[i].HelpTopicId != "Search") {
            var promise = $templateRequest(templateURL).then(function (template) {
                var text = HTMLToText(template, true);
                // do the search
                if (text.indexOf(searchPhrase) > -1) {
                    if (text.length > 50) text = text.substring(0, 50);
                    var result = {};
                    result.title = topic.Title;
                    result.excerpt = text;
                    result.helpID = topic.HelpTopicID;
                    results.push(result);
                }
            });
            promises.push(promise);
        }
    }
    return $q.all(promises).then(function () {
        return results;
    })

这里的问题是 for 循环显然不会等待回调，因此回调使用的主题不是正确的。我需要一种方法将主题传递到每个循环的回调中。

Answer 1

因为 JS 只有函数作用域，您可以重写代码以使用函数而不是“for”循环(这通常更好)。

为此，您可以使用 JS 内置的 forEach(从 1.6 版本开始可用，因此几乎适用于所有浏览器)或良好的功能样式库，如 underscore.js 或 lodash.js。

或者更好 - 使用 Array.map 和 Array.filter - 请参阅代码

function processTemplate(topic, template) {
  var text = HTMLToText(template, true);
  // do the search
  if (text.indexOf(searchPhrase) < 0) {
    return;
  }
  if (text.length > 50) {
    text = text.substring(0, 50);
  }
  return {
    title: topic.Title,
    excerpt: text,
    helpID: topic.HelpTopicID
  };
}

function searchHelpTopics(topics, searchPhrase) {
  if (!topics || topics.length === 0) {
    return "No search results";
  }
  var promises = topics
    .filter(function(topic) { return topic.HelpTopicId !== "Search"; })
    .map(function(topic) {
      return $templateRequest(topic.URL).then(processTemplate);
    });
  return $q.all(promises)
    .then(function (results) {
      return results.filter(function (result) {
        return result; // filters out 'undefined'
      });
    });
}