Question

我需要在ajax返回的结果上进行foreach循环。在执行foreach时，我要对照每条记录检查该图像是否存在。

图像存在代码

function imageExists(url, callback) {
    var img = new Image();
    img.onload = function() { callback(true); };
    img.onerror = function() { callback(false); };
    img.src = url;
}

对于每个循环

 hotelImagesText = '<ul class="gallery list-unstyled cS-hidden" id="image-gallery">';
    $.each(hotelImagesArr, (index, item) => {
        imageExists(item, function(exists) {
            if (exists) {
                hotelImagesText += '<li data-thumb="'+hotelImagesArr[index]+'"> 
               <img src="'+hotelImagesArr[index]+'"></li>';
             }
    });
});
    hotelImagesText += '</ul>';

当我进行控制台操作时，它只会给我上面包含ul的字符串。 imageExists内部的字符串不连续。

Answer 1

这是因为，即使$.each是同步的，imageExists也并非如此，因此串联发生得太晚了。

您可以做的是从后者返回Promise个实例，并使用Promise.all。

演示：

function imageExists(url) {
  return new Promise(resolve => {
    const img = new Image();
    img.onload = () => resolve(true);
    img.onerror = () => resolve(false);
    img.src = url;
  });
}

const hotelImagesArr = [
  'https://www.sample-videos.com/img/Sample-jpg-image-50kb.jpg',
  'https://www.sample-videos.com/img/Sample-jpg-image-100kb.jpg',
  'https://stackoverflow.com/idonotexist.jpg'
];

let hotelImagesText = '<ul class="gallery list-unstyled cS-hidden" id="image-gallery">';

const checks = hotelImagesArr.map(url => imageExists(url));

Promise.all(checks).then(checksResults => {
  for (let i in checksResults) {
    if (checksResults[i]) {
      hotelImagesText += `<li data-thumb="${hotelImagesArr[i]}"><img src="${hotelImagesArr[i]}"></li>`;
    }
  }

  hotelImagesText += '</ul>';

  console.log(hotelImagesText);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

foreach检查图像是否存在

1 个答案: