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

Question

I have this javascript function which checks if a certain image path exists. currently, the function is not finishing before the rest of the code is being executed. if anyone can recommend a way to make the program wait till this function is finished before continuing execution that would be amazing. Thanks!

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

The console log of this program displays the image url and the correct flag value but this is only displayed after the 'flag' + flag log is executed as false at all times due to the function not finishing its execution. Any advice or recommendations would be greatly appreciated thanks again!

Answer 1

You could use async/await to make it act as if it was synchronous.

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

Note that this is untested code, it's just to provide an idea of a solution.

Example: https://repl.it/repls/KhakiTreasuredTasks