循环中的 Jquery 承诺答案

【问题标题】：Jquery promises in loop循环中的 Jquery 承诺
【发布时间】：2020-07-23 17:34:30
【问题描述】：

我试图调用一个函数 3 次，它将广告网络提供的一些标记注入到我的文章中。我正在尝试使用 Promise 和 for 循环来实现如下：

var targetParagraph = x;
var slots = {
     8 : '<div>some content</div>',
     9 : '<div>some content</div>',
     10 : '<div>some content</div>'
};

 Object.keys(slots).forEach(function(key) {
      let scriptMarkup = '<div id="snack_dex' + key + '"></div>' + slots[key];
      injectArticleContent(targetParagraph, scriptMarkup).done(function() {
           console.log('done!');
      });
 });

 function injectArticleContent(targetParagraph, scriptMarkup){
      return $( ".js-article-body p:nth-child(" + targetParagraph + ")").after(scriptMarkup);
 }

当我运行上述程序时，我收到以下错误：

未捕获的类型错误：injectArticleContent(...).done 不是函数

为什么 injectArticleContent 不是函数？我一直在寻找我们过去的解决方案，但无法弄清楚，有什么想法吗？

【问题讨论】：

injectArticleContent 函数不会返回具有done 方法的内容。
示例中没有任何承诺，并且您的代码都不是异步的。为什么你觉得你需要done()？
Why is injectArticleContent not a function? 错误是说done() 不是来自injectArticleContent 函数的响应的函数

标签： javascript jquery promise

【解决方案1】：

假设获取标记是一项异步任务，您可以创建一个 Promise 列表并使用 Promise.all() 解决它们

let getMarkup = (id) => new Promise((resolve, reject) => {
  setTimeout(function() {
    resolve("markup from server")
  }, 1000)
})

var targetParagraph = 'x';
var slots = {
  8: '<div>some content</div>',
  9: '<div>some content</div>',
  10: '<div>some content</div>'
};

let promisses = Object.keys(slots)
  .map(k => getMarkup(k).then(res => injectArticleContent(k, res)))

Promise.all(promisses)

function injectArticleContent(targetParagraph, scriptMarkup) {
  console.log('rendering new post:: ', targetParagraph, scriptMarkup)
  return $(".js-article-body p:nth-child(" + targetParagraph + ")").after(scriptMarkup);
}

【讨论】：