Асинхронный JavaScript
"Я закончу позже!"
Функции, работающие параллельно с другими функциями, называются асинхронными.
Хорошим примером является JavaScript setTimeout().
Асинхронный JavaScript
Примеры, использованные в предыдущей главе, были очень упрощены.
Целью примеров была демонстрация синтаксиса callback-функций:
Пример
function myDisplayer(something) {
document.getElementById("demo").innerHTML
= something;
}
function myCalculator(num1, num2, myCallback) {
let sum = num1 + num2;
myCallback(sum);
}
myCalculator(5, 5, myDisplayer);
В приведенном выше примере myDisplayerэто имя функции.
Он передается в myCalculator()качестве аргумента.
В реальном мире обратные вызовы чаще всего используются с асинхронными функциями.
Типичный пример — JavaScript setTimeout().
Ожидание тайм-аута
При использовании функции JavaScript setTimeout()вы можете указать функцию обратного вызова, которая будет выполняться по тайм-ауту:
Пример
setTimeout(myFunction, 3000);
function myFunction() {
document.getElementById("demo").innerHTML = "I love You !!";
}
В приведенном выше примере myFunctionиспользуется в качестве обратного вызова.
myFunctionпередается в setTimeout()качестве аргумента.
3000 — это количество миллисекунд до истечения времени ожидания, поэтому
myFunction()вызов будет выполнен через 3 секунды.
Когда вы передаете функцию в качестве аргумента, помните, что нельзя использовать круглые скобки.
Правильно: setTimeout(myFunction, 3000);
Неправильный: setTimeout (моя функция (), 3000);
Вместо того, чтобы передавать имя функции в качестве аргумента другой функции, вы всегда можете вместо этого передать целую функцию:
Пример
setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {
document.getElementById("demo").innerHTML = value;
}
В приведенном выше примере function(){ myFunction("I love You !!!"); }
используется в качестве обратного вызова. Это полная функция. Полная функция передается в setTimeout() в качестве аргумента.
3000 — это количество миллисекунд до истечения времени ожидания, поэтому
myFunction()вызов будет выполнен через 3 секунды.
Ожидание интервалов:
При использовании функции JavaScript setInterval()вы можете указать функцию обратного вызова, которая будет выполняться для каждого интервала:
Пример
setInterval(myFunction, 1000);
function myFunction() {
let d = new Date();
document.getElementById("demo").innerHTML=
d.getHours() + ":" +
d.getMinutes() + ":" +
d.getSeconds();
}
В приведенном выше примере myFunctionиспользуется в качестве обратного вызова.
myFunctionпередается в setInterval()качестве аргумента.
1000 — это количество миллисекунд между интервалами, поэтому
myFunction()будет вызываться каждую секунду.
Ожидание файлов
Если вы создаете функцию для загрузки внешнего ресурса (например, сценария или файла), вы не можете использовать содержимое до его полной загрузки.
Это идеальное время для использования обратного вызова.
В этом примере загружается файл HTML ( mycar.html) и отображается файл HTML на веб-странице после полной загрузки файла:
Ожидание файла:
function myDisplayer(some) {
document.getElementById("demo").innerHTML = some;
}
function getFile(myCallback) {
let req = new XMLHttpRequest();
req.open('GET', "mycar.html");
req.onload = function() {
if (req.status == 200) {
myCallback(this.responseText);
} else {
myCallback("Error: " + req.status);
}
}
req.send();
}
getFile(myDisplayer);
В приведенном выше примере myDisplayerиспользуется в качестве обратного вызова.
myDisplayerпередается в getFile()качестве аргумента.
Ниже приведена копия mycar.html:
mycar.html
<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>A car is a wheeled, self-powered motor vehicle used for transportation.
Most definitions of the term specify that cars are designed to run primarily on roads,
to have seating for one to eight people, to typically have four wheels.</p>
<p>(Wikipedia)</p>