Асинхронный JavaScript

"Я завершу позже!"

Функции, выполняющиеся параллельно с другими функциями, называются асинхронными (asynchronous)

Хороший пример - JavaScript setTimeout()

Асинхронный JavaScript

Примеры, использованные в предыдущей главе, были значительно упрощены.

Его цель - продемонстрировать синтаксис callback функции:

Пример

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();.

В реальном мире callbacks часто используются с асинхронными функциями.

Типичный пример - JavaScript setTimeout();.

Ожидание таймаута

Используя JavaScript функции setTimeout(); Когда можно определить функцию, которая будет выполняться по истечении времени:

Пример

setTimeout(myFunction, 3000);
function myFunction() {
  document.getElementById("demo").innerHTML = "I love You !!";
}

попробуйте сами

В примере вышеmyFunction Используется в качестве回调а.

Функция (имя функции) передается в качестве параметра в setTimeout();.

3000 - это количество миллисекунд до таймаута, поэтому через 3 секунды будет вызван myFunction();.

Когда вы передаете функцию в качестве аргумента, запомните, что не используйте скобки.

Правильно: setTimeout(myFunction, 3000);

Ошибка: setTimeout(myFunction(), 3000);

Если не передавать имя функции в качестве аргумента другой функции, вы всегда можете передать всю функцию:

Пример

setTimeout(function() { myFunction("I love You !!!"); }, 3000);
function myFunction(value) {}}
  document.getElementById("demo").innerHTML = value;
}

попробуйте сами

В上面的例子中，function(){ myFunction("Я люблю тебя !!!"); } используется в качестве回调. Это полный функционал функции. Полная функция передается в качестве параметра в setTimeout().

3000 - это количество миллисекунд до таймаута, поэтому через 3 секунды будет вызван myFunction();.

Ожидание интервала:

Используя 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и после полного загрузки файла отображать его на веб-странице：

Ожидание файла：

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);
    }
      myCallback("Ошибка: " + 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>
<p>Большинство определений термина указывают, что автомобили предназначены для движения в основном по дорогам, имеют места для одного до восьми человек и, как правило, имеют четыре колеса.</p>
<p>(Википедия)</p>