Асинхронный JavaScript
"Я закончу позже!"
Функции, выполняющиеся параллельно с другими функциями, называются асинхронными.
Хорошим примером является JavaScript setTimeout().
Асинхронный JavaScript
Примеры, использованные в предыдущей главе, были очень упрощены.
Целью примеров было продемонстрировать синтаксис функций обратного вызова:
Пример
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 используется в качестве обратного вызова.
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 используется в качестве обратного вызова.
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>Автомобиль - это колесный самоходный автомобиль, используемый для перевозки.
В большинстве определений этого термина указывается, что автомобили предназначены в первую очередь для движения по дорогам, чтобы в них могли разместиться от одного до восьми человек, и, как правило, имеют четыре колеса.</p>
<p>(Wikipedia)</p>
