Функция обратного вызова — это функция, которая вызывает другую функцию.
Типичный пример — addEventListener:
target.addEventListener(type, listener);
//the listener is always a function
Каждый раз, когда целевое событие запускается (прослушивается), оно запускает функцию прослушивателя.
Это говорит о том, что такое асинхронное программирование — программа реагирует не сразу. С другой стороны, он ждет, пока не будет выполнено его условие срабатывания, например, вы нажмете кнопку или отправите форму.
Здесь мы практикуем этот механизм с addEventListener и XMLHttpRequest.
Коды изменены из этой статьи
Начальный файл:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Simple async sync example</title>
</head>
<body>
<button>Show Coffee</button>
<script>
//put your codes here
</script>
</body>
</html>
1. Создайте функцию loadImage
- Инициировать новый объект XMLHttpRequest
- Используйте метод
XMLHttpRequest
**open()**
для создания запроса. Синтаксисopen(_method, url, async_)
- Используйте свойство
XMLHttpRequest
responseType
, чтобы указать тип ответа, например текст, JSON или блоб. - Используйте событие
onload
в качестве функции обратного вызова, чтобы получить ответ при обновлении (загрузке) содержимого. - Используйте метод XMLHttpRequest
send()
для отправки запроса
function loadImage(url, type, callback) { let xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.responseType = type;
xhr.onload = function() { callback(xhr.response); };
xhr.send(); }
2. Создайте функцию displayImage
- Используйте метод
URL.createObjectURL()
для хранения URL-адреса изображения. - Создайте модель DOM image и сохраните в ней переменную URL.
function displayImage(blob) {
let imageURL = URL.createObjectURL(blob);
let image = document.createElement('img');
image.src = imageURL;
document.body.appendChild(image);
}
3. Создайте прослушиватель событий
- Добавьте прослушиватель событий к кнопке.
- Внутри слушателя поместите функцию
loadImage
и настройте ее параметры.
const btn = document.querySelector('button');
btn.addEventListener('click', () => {
loadImage('coffee.jpg', 'blob', displayImage);
});