Блог

Главная - Вопросы по программированию - Смешивание процедур и событий

Смешивание процедур и событий

#javascript #events #procedure

#javascript #Мероприятия #процедура

Вопрос:

У меня есть функция, которая загружает изображение и проверяет, успешно ли оно загружается. (Чтобы узнать, поддерживает ли браузер WebP)

Проблема в том, что для этого мне приходится использовать onload() и onerror(), а это значит, что я не могу просто вернуть значение.

Как я могу отложить возврат до запуска события?

Вот мой код:

 function start_check_webp(){
  var div = document.createElement('div');
  div.innerHTML = '<img id = "test_image" src="test_image.webp">';
  webp_test = div.firstChild;
  div.firstChild.onerror = function(){support_webp = false}
  div.firstChild.onload = function(){support_webp = true}
}

Ответ №1:

Вы не можете. Вам нужно будет реструктурировать свой код для обработки асинхронных событий. Вместо того, чтобы ваши обработчики событий устанавливали переменную, вы могли бы заставить их вызывать функцию, которая действительно что-то делает, если поддерживается WebP или иным образом.

Комментарии:

1. Хорошо … это был мой другой вариант, но я предпочел получить значение «да» / «нет». Просто для проверки, нет никакого способа узнать, не удалась ли загрузка изображения без использования событий, не так ли?

2. @snostorm: К сожалению, нет. Браузеру необходимо сначала загрузить изображение с сервера, что обязательно делает его асинхронным. (В JavaScript нет блокирующих вызовов.)

Ответ №2:

Структурируйте свой код так, чтобы он выполнялся после загрузки изображения. Вы можете ускорить процесс, используя URI данных вместо внешнего изображения, например

 function testWepP() {
  var webP = new Image();     
  webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIAL'   
    'mk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
  webP.onload = webP.onerror = function () {
     callback(webP.height === 2);     
  }; 
};

testWebP(function(supported) {
  console.log((supported) ? "webP supported!" : "webP not supported."); 
});