JavaScript Асинхронный
"Я закончу позже!"
Функции, выполняющиеся параллельно с другими функциями, называются асинхронными.
Хороший пример - JavaScript setTimeout().
Асинхронный
Примеры, использованные в предыдущей главе, были очень упрощены.
Целью примеров было продемонстрировать синтаксис функций обратного вызова:
Пример
function myDisplayer(some) {
document.getElementById("demo").innerHTML
= some;
}
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 используется как обратный вызов.
Функция (имя функции) передается setTimeout() в качестве аргумента.
3000 - количество миллисекунд до тайм-аута, поэтому myFunction() будет вызвано через 3 секунды.
Когда вы передаете функцию в качестве аргумента, помните, что нельзя использовать скобки.
Правильно: setTimeout(myFunction, 3000);
Неправильно: setTimeout(myFunction(), 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 ,используется как обратный вызов.
Функция (имя функции) передается 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 используется как обратный вызов.
Функция (имя функции) передается getFile() в качестве аргумента.
Ниже представлена копия mycar.html:
mycar.html
<img src="img_car.jpg" alt="Nice car" style="width:100%">
<p>Автомобиль - это колесный транспорт с автономным приводом, используемый для транспортировки.
В большинстве определений этого термина указывается, что автомобили предназначены для передвижения по дорогам, вмещать от одного до восьми человек, обычно четырехколесные.
<p>(Wikipedia)</p>
