From 65cc6eabd71b1bceccf6fd3d3d4970c2955f3784 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Thu, 10 Dec 2020 08:37:18 -0500 Subject: dump 2020-12-10 --- .../javascript/asynchronous/introducing/index.html | 4 ++-- .../index.html" | 18 +++++++++--------- 2 files changed, 11 insertions(+), 11 deletions(-) (limited to 'files/ru/learn/javascript/asynchronous') diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.html b/files/ru/learn/javascript/asynchronous/introducing/index.html index b25ca4037e..340938e010 100644 --- a/files/ru/learn/javascript/asynchronous/introducing/index.html +++ b/files/ru/learn/javascript/asynchronous/introducing/index.html @@ -105,7 +105,7 @@ let blob = response.blob();

Первый параметр — тип прослушиваемого события, второй параметр — функция обратного вызова, вызываемая при срабатывании события.

-

При передаче функциии обратного вызова как аргумента в другую функцию, мы передаем только ссылку на функцию как аргумент, следовательно коллбэк функция не выполняется мгновенно. Где-то существует "обратный вызов" (отсюда и название), выполняющийся асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять функцию обратногго вызова в нужный момент.

+

При передаче функциии обратного вызова как аргумента в другую функцию, мы передаем только ссылку на функцию как аргумент, следовательно колбэк функция не выполняется мгновенно. Где-то существует "обратный вызов" (отсюда и название), выполняющийся асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять функцию обратного вызова в нужный момент.

Вы можете написать свою собственную функцию, содержащую функцию обратного вызова. Давайте взглянем на еще один пример, в котором происходит загрузка ресурсов через XMLHttpRequest API (запустите пример, и посмотрите исходный код):

@@ -143,7 +143,7 @@ gods.forEach(function (eachName, index){ console.log(index + '. ' + eachName); }); -

В этом примере мы перебираем массив с именами греческих богов и выводим индексы и значения в консоль. Ожидаемый параметр для forEach()  — это функцияобратного вызова, которая содержит два параметра: ссылку на имя массива и значения индексов. Однако эта функция не ожидает никаких действий — она запускается немедленно.

+

В этом примере мы перебираем массив с именами греческих богов и выводим индексы и значения в консоль. Ожидаемый параметр для forEach()  — это функция обратного вызова, которая содержит два параметра: ссылку на имя массива и значения индексов. Однако эта функция не ожидает никаких действий — она запускается немедленно.

Промисы

diff --git "a/files/ru/learn/javascript/asynchronous/\321\202\320\260\320\271\320\274\320\260\321\203\321\202\321\213_\320\270_\320\270\320\275\321\202\320\265\321\200\320\262\320\260\320\273\321\213/index.html" "b/files/ru/learn/javascript/asynchronous/\321\202\320\260\320\271\320\274\320\260\321\203\321\202\321\213_\320\270_\320\270\320\275\321\202\320\265\321\200\320\262\320\260\320\273\321\213/index.html" index 00506c2a14..e3aa0c72b8 100644 --- "a/files/ru/learn/javascript/asynchronous/\321\202\320\260\320\271\320\274\320\260\321\203\321\202\321\213_\320\270_\320\270\320\275\321\202\320\265\321\200\320\262\320\260\320\273\321\213/index.html" +++ "b/files/ru/learn/javascript/asynchronous/\321\202\320\260\320\271\320\274\320\260\321\203\321\202\321\213_\320\270_\320\270\320\275\321\202\320\265\321\200\320\262\320\260\320\273\321\213/index.html" @@ -61,7 +61,7 @@ translation_of: Learn/JavaScript/Asynchronous/Timeouts_and_intervals

Как следствие, такой код, как setTimeout (fn, 0), будет выполняться, как только стек будет пуст, а не сразу. Если вы выполните такой код, как setTimeout (fn, 0), но сразу после выполнения цикла, который насчитывает от 1 до 10 миллиардов, ваш обратный вызов будет выполнен через несколько секунд.

-

В слудующем примере, браузер будет ожидать две секунды перед тем как  выполнит анонимную функцию, тогда отобразит сообщение (живой пример, и исходный код):

+

В следующем примере, браузер будет ожидать две секунды перед тем как  выполнит анонимную функцию, тогда отобразит сообщение (живой пример, и исходный код):

let myGreeting = setTimeout(function() {
   alert('Hello, Mr. Universe!');
@@ -151,7 +151,7 @@ clearInterval(myInterval);

Несколько подсказок для вас:

-

Note: Если вы застрали, вы можете увидеть нашу версию (см. также исходный код ).

+

Note: Если вы застряли, вы можете увидеть нашу версию (см. также исходный код ).

Что нужно помнить о setTimeout () и setInterval ()

@@ -359,7 +359,7 @@ div {

Разместите  {{htmlelement("script")}} элемент перед </body> .

  • -

    Разместите следующий JavaScript код в  <script> . Здесь вы сохраняете ссылку на <div> внутри, устанавливаете дяпеременной rotateCount значение 0, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов requestAnimationFrame(), и устанавливатете для переменной startTime значение null, которая будет позже использоваться для хранения времени начала requestAnimationFrame().

    +

    Разместите следующий JavaScript код в  <script> . Здесь вы сохраняете ссылку на <div> внутри, устанавливаете дяпеременной rotateCount значение 0, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов requestAnimationFrame(), и устанавливаете для переменной startTime значение null, которая будет позже использоваться для хранения времени начала requestAnimationFrame().

    const spinner = document.querySelector('div');
 let rotateCount = 0;
@@ -368,7 +368,7 @@ let rAF;
  • -

    Под предыдущим котом вставьте функцию draw() соторая будет использоваться для хранения нашешо кода анимации, который включает параметр timestamp :

    +

    Под предыдущим кодом вставьте функцию draw() соторая будет использоваться для хранения нашешо кода анимации, который включает параметр timestamp :

    function draw(timestamp) {
 
@@ -513,7 +513,7 @@ const result = document.querySelector('.result');
    }
  • -

    Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера просторо счетчика:

    +

    Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера простого счетчика:

    function draw(timestamp) {
   if(!startTime) {
@@ -595,16 +595,16 @@ function start() {
   };
 }
    -

    Пройдите через это:

    +

    Выполните следующие инструкции:

      -
    1. Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужный процессы), и скройте контейнер счетчика.
      2. +
    2. Во-первых, отмените анимацию спиннера с помощью {{domxref("window.cancelAnimationFrame", "cancelAnimationFrame()")}} (всегда полезно очистить ненужные процессы), и скройте контейнер счетчика.
    3. Затем, отобразите абзац с результатами и установите для его текстового содержимого значение "PLAYERS GO!!"  чтобы сообщить игрокам, что теперь они могут нажать свою кнопку, чтобы победить.
    4. Прикрепите к документу прослушиватель событий keydown . При нажатии любой кнопки запускается функция keyHandler().
    5. Внутри keyHandler(), код включает обьект события в качестве параметра (представленного e) — его свойство {{domxref("KeyboardEvent.key", "key")}} содержит только что нажатую клавишу, и вы можете использовать это для твета на определенные нажатия клавиш определенными действиями.
    6. Установите для переменной isOver значение false, чтобы мы могли отслеживать, были ли нажаты правильные клавиши, чтобы игрок 1 или 2 выиграл. Мы не хотим, чтобы игра заканчивалась при нажатии неправильной клваиши.
    7. Регистрация e.key в консоли, это полезный способ узнать значение различных клавиш, которые вы нажимаете.
      8. -
    8. Когда e.key принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда e.key это "l", отобразить сообщение о том, что Player 2 выиграл. (Note: Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавишь, установите для isOver значение true.
      9. +
    9. Когда e.key принимает значение "a", отобразить сообщение о том, что Player 1 выиграл, а когда e.key это "l", отобразить сообщение о том, что Player 2 выиграл. (Note: Это будет работать только со строчными буквами a и l — если переданы прописные A или L , это считается другими клавишами!) Если была нажата одна из этих клавиш, установите для isOver значение true.
    10. Только еслиf isOver равно true, удалите прослушиватель событий keydown с помощью {{domxref("EventTarget.removeEventListener", "removeEventListener()")}} чтобы после того, как произошло выигрышное нажатие, больше не было возможности ввода с клавиатуры, чтобы испортить финальный результат игры. Вы также используете setTimeout() для вызова reset() через 5 секунд — как обьяснялось ранее, эта функция сбрасывает игру обратно в исходное состояние, чтобы можно было начать новую игру.
    • -- cgit v1.2.3-54-g00ecf