Javascript Promise.all - 如何使这个现有函数同步？

Question

我有一个函数，当它运行同步时工作正常，但是一旦我让它异步它就无法工作，因为它在所有图像加载之前 returning 为真。

这是原来存在的函数：

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，函数就会触发，图像滑块就会启动。

我想延迟加载图像，但出于某种原因，如果不尝试加载 return 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 会 return 编辑得太早，滑块功能会提前启动。任何人都可以帮助我了解如何以同步/链接方式进行这项工作吗？我已经尝试了一段时间，但似乎无法正常工作。

提前致谢。

Answer 1

上面的代码有很多问题，说明您可能需要更好地理解Promises是如何工作的。您的函数可能应该 return Promise，以便调用者处理他们这边的异步性。

所以要么使用：

return Promise.all(promises);

或：

return Promise.all(promises).then(function() { return true; })

Answer 2

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

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

Javascript Promise.all - 如何使这个现有函数同步？

Javascript Promise.all - how can I make this existing function synchronous?

javascript

jquery

synchronous

chaining

promise