Question

我有这个javascript函数，用于检查是否存在某个图像路径。当前，该功能在其余代码执行之前尚未完成。如果有人可以推荐一种方法让程序等到该函数完成后再继续执行，那将是惊人的。谢谢！

var flag = false;

function checkImageExists(imageUrl, callBack) {
    var imageData = new Image();
    imageData.onload = function () {
        callBack(true);
    };
    imageData.onerror = function () {
        callBack(false);
    };
    imageData.src = imageUrl;
}

checkImageExists(card.logoSrc, function (existsImage) {
    if (existsImage === true) {
        flag = true;
        console.log(card.logoSrc + ' ' + flag);
    } else {
        flag = false;
        console.log(card.logoSrc + ' ' + flag);
    }
});
console.log('flag ' + flag);

该程序的控制台日志显示图像url和正确的标志值，但是由于功能未完成执行，因此仅在始终将'flag'+标志日志执行为false后才显示该值。任何建议或建议将不胜感激，再次感谢！

Answer 1

您可以使用async/await使它看起来像是同步的。

function checkImageExists(imageUrl) {
  return new Promise((resolve, reject) => {
    let imageData = new Image();

    imageData.onload = function () {
        resolve(true);
    };
    imageData.onerror = function () {
        reject(false);
    };

    // not really sure why you have this here, but ok
    imageData.src = imageUrl;
  });
}

async function init() {
  try {
    const isImageLoaded = await checkImageExists(card.logoSrc);
    console.log(isImageLoaded);
  } catch(error) {
    console.error(error);
  }
}

init();

请注意，这是未经测试的代码，仅用于提供解决方案的想法。

示例：https://repl.it/repls/KhakiTreasuredTasks

如何使JavaScript检查图像同步存在回调函数

1 个答案: