Функцията за обратно извикване, а именно, е функция, която извиква обратно с друга функция.
Често срещаният пример е 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 или blob. - Използвайте събитие
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 и запазете 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);
});