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，则会很快返回imagesDone，并且滑块功能会提前启动。任何人都可以帮助我理解如何以同步/链式方式使这项工作？我已经尝试了一段时间，但似乎无法让它发挥作用。

提前致谢。

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

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

2 个答案: