Как сделать так, чтобы изображение проверки javascript существовало синхронно с функцией обратного вызова
У меня есть эта функция 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.info(card.logoSrc + ' ' + flag);
} else {
flag = false;
console.info(card.logoSrc + ' ' + flag);
}
});
console.info('flag ' + flag);
В журнале консоли этой программы отображается URL-адрес изображения и правильное значение флага, но оно отображается только после того, как журнал «флаг» + флаг всегда выполняется как ложный из-за того, что функция не завершает свое выполнение. Будем очень признательны за любые советы или рекомендации, еще раз спасибо!
Вы не можете. Вам нужно будет написать свою программу таким образом, чтобы значение не возвращалось немедленно.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 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.info(isImageLoaded);
} catch(error) {
console.error(error);
}
}
init();
Обратите внимание, что это непроверенный код, он просто дает представление о решении.
Пример: https://repl.it/repls/KhakiTreasuredTasks
есть ли способ сделать это со старыми обещаниями javascript без использования функции стрелки async await? или еще лучше, как бы выглядел вызов функции, чтобы уловить обещание? спасибо @Baruch
@ChrisKelly Почему ты хочешь делать это по-старому? Это встроенные функции javascript. Также обновлен ответ, чтобы выявить ошибки.
Я работаю с устаревшим кодом на своем рабочем месте и не смог использовать async await! Спасибо за вашу помощь
Он работает так, как ожидалось, потому что ваш
console.info('flag ' + flag)вне функции, поэтому он сначала дает значения, console.info внутри checkImageExists возвращается позже, потому что он проверяет наличие URL-адреса или нет