Javascript Promise.all - 如何使这个现有功能同步？

Question

我有一个函数，它在同步运行时运行良好，但一旦我使其异步运行，它就无法运行，因为它在加载所有图像之前返回 true。

这是存在的原始函数:

if (window.num_alt > 0) {
  var div = document.getElementById('productImageLarge');

  if (div) {
    var html = '';
    colour = colour || '';

    var tmp = getTemplate('image_holder');
    if (!tmp) { tmp = 'image_holder is missing<br>'; }

    // num_alt same number as images - use this for the loop
    for (var i=0; i<num_alt-0+1; i++) {
      var tmp1 = tmp;
      tmp1 = tmp1.replace(/\[xx[_ ]image\]/ig, imagename+colour+alt_ext[i]);
      tmp1 = tmp1.replace(/\[xx[_ ]img_no\]/ig, i);
      html += tmp1;

      // at the end of the loop
      if (i == num_alt) {
        imagesDone = true;
      }
    }
    div.innerHTML = html;
  }
}
return imagesDone;

基本上它采用变量中设置的 num_alt 图像(设置为 8)并填充 JS 模板。一旦它在循环结束时，我有另一个函数在间隔上测试 imagesDone == true。一旦设置为 true，该函数就会触发，图像 slider 就会启动。

我想延迟加载图像，出于某种原因，当前函数不允许我在不尝试加载返回 404 的图像的情况下执行此操作。所以我将函数转换为使用 promises，它会调用自身直到所有图像被处理(删除了 for 循环)并且这已经工作了一段时间，但是它使用 async:false....

var imagesDone = false;
//console.log("Create Image");

if (window.num_alt > 0) {
  var div = document.getElementById('productImageLarge');

  if (div) {
    var html = '';
    colour = colour || '';

    var tmp = getTemplate('image_holder');
    if (!tmp) { tmp = 'image_holder is missing<br>'; }

    var i = 0;
    var promises = [];
    function ajax_data() {

      promises.push($.ajax({
        url: thisUrl+'product-image.php?size=large&image=/'+imagename+colour+alt_ext[i]+'.jpg',
        method: 'post',
        data: promises,
        async : false,
        success: function (resp) {
          if (i<=num_alt) {
            var tmp1;
            tmp1 = tmp;
            tmp1 = tmp1.replace(/\[xx[_ ]image\]/ig, imagename+colour+alt_ext[i]);
            tmp1 = tmp1.replace(/\[xx[_ ]img_no\]/ig, i);
            html += tmp1;
            div.innerHTML = html;
            i++;

            ajax_data();
          }
        }
      }))
    }

    Promise.all([ajax_data()])
      .then([imagesDone = true])
      .catch(e => console.log(e));

  }
}
return imagesDone;

如果我删除 async:false，imagesDone 会过早返回， slider 功能会提前启动。任何人都可以帮助我了解如何以同步/链接方式进行这项工作吗？我已经尝试了一段时间，但似乎无法让它发挥作用。

提前致谢。

Answer 1

不清楚你想做什么，你的代码看起来像是一个函数的一部分，但它并没有做你想做的事情。也许以下内容对您有用:

var Fail = function(reason){this.reason=reason;};
var isFail = function(o){return (o||o.constructor)===Fail;};
var isNotFail = function(o){return !isFail(0);};

//...your function returning a promise:
var tmp = getTemplate('image_holder') || 'image_holder is missing<br>';
var div = document.getElementById('productImageLarge');
var html = '';
var howManyTimes = (div)?Array.from(new Array(window.num_alt)):[];
colour = colour || '';
return Promise.all(//use Promise.all
  howManyTimes.map(
    function(dontCare,i){
      return Promise.resolve(//convert jQuery deferred to real/standard Promise
        $.ajax({
          url: thisUrl+'product-image.php?size=large&image=/'+imagename+colour+alt_ext[i]+'.jpg',
          method: 'post',
          data: noIdeaWhatYouWantToSendHere//I have no idea what data you want to send here
          // async : false //Are you kidding?
        })
      ).catch(
        function(error){return new Fail(error);}
      );
    }
  )
).then(
  function(results){
    console.log("ok, worked");
    return results.reduce(
      function(all,item,i){
        return (isFail(item))
          ? all+"<h1>Failed</h1>"//what if your post fails?
          : all+tmp.replace(/\[xx[_ ]image\]/ig, imagename + colour + alt_ext[i])
            .replace(/\[xx[_ ]img_no\]/ig, i);
      },
      ""
    );
  }
).then(
  function(html){
    div.innerHTML=html;
  }
)