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后，該函數將觸發並且圖像滑塊將彈起。

我想延遲加載圖像，由於某種原因，當前函數不允許我不嘗試加載返回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，則將返回imageDone太早，並且滑塊功能會提前開始。 誰能幫助我了解如何以同步/鏈接方式進行這項工作？ 我已經嘗試了一段時間，但似乎無法正常工作。

提前致謝。

Answer 1

上面的代碼中有很多問題，表明您可能需要更好地了解Promises的工作方式。 您的函數可能應該返回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;
  }
)