diff options
author | Alexey Pyltsyn <lex61rus@gmail.com> | 2021-03-20 13:22:35 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2021-03-20 13:22:35 +0300 |
commit | d527d47d926b8ff165c47b8be7b95ce6c9265209 (patch) | |
tree | 0ee5bb8ee7e89535b1ce97f75e0fabe0463976b8 /files/ru/learn/javascript/asynchronous/introducing/index.html | |
parent | ed27358bb580f8366fadca2124a7477814b7e16e (diff) | |
download | translated-content-d527d47d926b8ff165c47b8be7b95ce6c9265209.tar.gz translated-content-d527d47d926b8ff165c47b8be7b95ce6c9265209.tar.bz2 translated-content-d527d47d926b8ff165c47b8be7b95ce6c9265209.zip |
Unify Russian translation for callback word (#226)
* Unify Russian translation for callback word
* Apply suggestions from code review
Co-authored-by: Sasha Sushko <sushko@outlook.com>
* Fixes
Co-authored-by: Sasha Sushko <sushko@outlook.com>
Diffstat (limited to 'files/ru/learn/javascript/asynchronous/introducing/index.html')
-rw-r--r-- | files/ru/learn/javascript/asynchronous/introducing/index.html | 34 |
1 files changed, 17 insertions, 17 deletions
diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.html b/files/ru/learn/javascript/asynchronous/introducing/index.html index 6c273c9052..75cae85c11 100644 --- a/files/ru/learn/javascript/asynchronous/introducing/index.html +++ b/files/ru/learn/javascript/asynchronous/introducing/index.html @@ -86,13 +86,13 @@ let blob = response.blob(); <p>Это происходит потому что вы не знаете сколько времени займет загрузка картинки, следовательно, когда вы начнёте выполнять вторую строку кода, сгенерируется ошибка (возможно, периодически, возможно, каждый раз), потому что <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">response</span></font> еще не доступен. Вместо этого, ваш код должен дождаться возвращения <font face="consolas, Liberation Mono, courier, monospace"><span style="background-color: rgba(220, 220, 220, 0.5);">response</span></font> до того, как попытается выполнить дальнейшие инструкции.</p> -<p>Есть два типа стиля асинхронного кода, с которыми вы столкнетесь в коде JavaScript, старый метод — callbacks (обратные вызовы) и более новый — promise (промисы, обещания). В следующих разделах мы познакомимся с каждым из них. </p> +<p>Есть два типа стиля асинхронного кода, с которыми вы столкнетесь в коде JavaScript, старый метод — callbacks (колбэки) и более новый — promise (промисы, обещания). В следующих разделах мы познакомимся с каждым из них. </p> -<h2 id="Асинхронные_обратные_вызовы">Асинхронные обратные вызовы</h2> +<h2 id="Асинхронные_колбэки">Асинхронные колбэки</h2> -<p>Асинхронные обратные вызовы — это функции, которые определяются как аргументы при вызове функции, которая начнет выполнение кода на заднем фоне. Когда код на заднем фоне завершает свою работу, он вызывает функцию обратного вызова, оповещающую, что работа сделана, либо оповещающую о трудностях в завершении работы. Обратные вызовы — немного устаревшая практика, но они все еще употребляются в некоторых старомодных, но часто используемых API.</p> +<p>Асинхронные колбэки — это функции, которые определяются как аргументы при вызове функции, которая начнет выполнение кода на заднем фоне. Когда код на заднем фоне завершает свою работу, он вызывает колбэк-функцию, оповещающую, что работа сделана, либо оповещающую о трудностях в завершении работы. Обратные вызовы — немного устаревшая практика, но они все еще употребляются в некоторых старомодных, но часто используемых API.</p> -<p>Пример асинхронного обратного вызова вторым параметром {{domxref("EventTarget.addEventListener", "addEventListener()")}} (как мы видели выше):</p> +<p>Пример асинхронного колбэка вторым параметром {{domxref("EventTarget.addEventListener", "addEventListener()")}} (как мы видели выше):</p> <pre class="brush: js notranslate">btn.addEventListener('click', () => { alert('You clicked me!'); @@ -102,11 +102,11 @@ let blob = response.blob(); document.body.appendChild(pElem); });</pre> -<p>Первый параметр — тип обрабатываемого события, второй параметр — функция обратного вызова, вызываемая при срабатывании события.</p> +<p>Первый параметр — тип обрабатываемого события, второй параметр — колбэк-функция, вызываемая при срабатывании события.</p> -<p>При передаче функции обратного вызова как аргумента в другую функцию, мы передаем только ссылку на функцию как аргумент, следовательно колбэк функция <strong>не</strong> выполняется мгновенно. Где-то существует "обратный вызов" (отсюда и название), выполняющийся асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять функцию обратного вызова в нужный момент.</p> +<p>При передаче колбэк-функции как аргумента в другую функцию, мы передаем только ссылку на функцию как аргумент, следовательно колбэк-функция <strong>не</strong> выполняется мгновенно. Она вызывается асинхронно внутри тела, содержащего функцию. Эта функция должна выполнять колбэк-функцию в нужный момент.</p> -<p>Вы можете написать свою собственную функцию, содержащую функцию обратного вызова. Давайте взглянем на еще один пример, в котором происходит загрузка ресурсов через <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">запустите пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">посмотрите исходный код</a>):</p> +<p>Вы можете написать свою собственную функцию, содержащую колбэк-функцию. Давайте взглянем на еще один пример, в котором происходит загрузка ресурсов через <a href="/en-US/docs/Web/API/XMLHttpRequest"><code>XMLHttpRequest</code> API</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/xhr-async-callback.html">запустите пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/xhr-async-callback.html">посмотрите исходный код</a>):</p> <pre class="brush: js notranslate">function loadAsset(url, type, callback) { let xhr = new XMLHttpRequest(); @@ -130,11 +130,11 @@ function displayImage(blob) { loadAsset('coffee.jpg', 'blob', displayImage);</pre> -<p>Мы создали функцию <code>displayImage()</code>, которая представляет blob, переданный в нее, как объект URL, и создает картинку, в которой отображается URL, добавляя ее в элемент документа <code><body></code>. Однако, далее мы создаем функцию <code>loadAsset()</code>, которая принимает функцию обратного вызова в качестве параметра, вместе с URL для получения данных и типом контента. Для получения данных из URL используется <code>XMLHttpRequest</code> (часто сокращается до аббревиатуры "XHR") , перед тем как передать ответ в функцию обратного вызова для дальнейшей обработки. В этом случае функция обратного вызова ждет, пока XHR закончит загрузку данных (используя обработчик события <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) перед отправкой данных в функцию обратного вызова.</p> +<p>Мы создали функцию <code>displayImage()</code>, которая представляет blob, переданный в нее, как объект URL, и создает картинку, в которой отображается URL, добавляя ее в элемент документа <code><body></code>. Однако, далее мы создаем функцию <code>loadAsset()</code>, которая принимает колбэк-функцию в качестве параметра, вместе с URL для получения данных и типом контента. Для получения данных из URL используется <code>XMLHttpRequest</code> (часто сокращается до аббревиатуры "XHR") , перед тем как передать ответ в колбэк-функцию для дальнейшей обработки. В этом случае колбэк-функция ждет, пока XHR закончит загрузку данных (используя обработчик события <code><a href="/en-US/docs/Web/API/XMLHttpRequestEventTarget/onload">onload</a></code>) перед отправкой данных в колбэк-функцию.</p> -<p>Функции обратного вызова универсальны — они не только позволяют вам контролировать порядок, в котором запускаются функции и данные, передающиеся между ними, они также позволяют передавать данные различным функциям, в зависимости от обстоятельств. Вы можете выполнять различные действия с загруженным ответом, такие как <code>processJSON()</code>, <code>displayText()</code>, и другие.</p> +<p>Колбэк-функции универсальны — они не только позволяют вам контролировать порядок, в котором запускаются функции и данные, передающиеся между ними, они также позволяют передавать данные различным функциям, в зависимости от обстоятельств. Вы можете выполнять различные действия с загруженным ответом, такие как <code>processJSON()</code>, <code>displayText()</code>, и другие.</p> -<p>Заметьте, что не все функции обратного вызова асинхронны — некоторые запускаются синхронно. Например, при использовании {{jsxref("Array.prototype.forEach()")}} для перебора элементов массива (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/foreach.html">запустите пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/foreach.html">посмотрите исходный код</a>):</p> +<p>Заметьте, что не все колбэк-функции асинхронны — некоторые запускаются синхронно. Например, при использовании {{jsxref("Array.prototype.forEach()")}} для перебора элементов массива (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/foreach.html">запустите пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/foreach.html">посмотрите исходный код</a>):</p> <pre class="brush: js notranslate">const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus']; @@ -142,7 +142,7 @@ gods.forEach(function (eachName, index){ console.log(index + '. ' + eachName); });</pre> -<p>В этом примере мы перебираем массив с именами греческих богов и выводим индексы и значения в консоль. Ожидаемый параметр для <code>forEach() </code> — это функция обратного вызова, которая содержит два параметра: ссылку на имя массива и значения индексов. Однако эта функция не ожидает никаких действий — она запускается немедленно.</p> +<p>В этом примере мы перебираем массив с именами греческих богов и выводим индексы и значения в консоль. Ожидаемый параметр для <code>forEach() </code> — это Колбэк-функция, которая содержит два параметра: ссылку на имя массива и значения индексов. Однако эта функция не ожидает никаких действий — она запускается немедленно.</p> <h2 id="Промисы">Промисы</h2> @@ -166,7 +166,7 @@ gods.forEach(function (eachName, index){ <p>Может понадобиться много времени, чтобы привыкнуть к данной концепции; это немного напоминает {{interwiki("wikipedia", "Кот Шрёдингера")}} в действии. Ни один из возможных результатов еще не произошел, поэтому операция fetch в настоящее время ожидает результата. Далее у нас есть три блока кода следующих сразу после <code>fetch()</code>:</p> <ul> - <li>Два <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code> блока. Оба включают в себя функцию обратного, которая запустится, если предыдущая операция закончилась успешно, и каждая функция обратного вызова принимает на вход результат предыдущей успешно выполненной операции, таким образом вы можете выполнять операции последовательно. Каждый <code>.then()</code> блок возвращает новый promise, это значит что вы можете объединять в цепочки блоки <code>.then()</code>, таким образом можно выполнить несколько асинхронных операций по порядку, одну за другой.</li> + <li>Два <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then">then()</a></code> блока. Оба включают в себя функцию обратного, которая запустится, если предыдущая операция закончилась успешно, и каждая колбэк-функция принимает на вход результат предыдущей успешно выполненной операции, таким образом вы можете выполнять операции последовательно. Каждый <code>.then()</code> блок возвращает новый promise, это значит что вы можете объединять в цепочки блоки <code>.then()</code>, таким образом можно выполнить несколько асинхронных операций по порядку, одну за другой.</li> <li><code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch">catch()</a></code> блок описывается в конце и будет запущен если какой-либо <code>.then()</code> блок завершится с ошибкой — это аналогично синхронному <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code>, ошибка становится доступной внутри <code>catch()</code>, что может быть использовано для сообщения пользователю о типе возникшей ошибки. Однако синхронный <code>try...catch</code> не будет работать с promise, хотя будет работать с <a href="/en-US/docs/Learn/JavaScript/Asynchronous/Async_await">async/await</a>, с которыми вы познакомитесь позже.</li> </ul> @@ -178,17 +178,17 @@ gods.forEach(function (eachName, index){ <p>Асинхронные операции, такие как промисы, помещаются в <strong>очередь событий</strong>, которая запускается после завершения обработки основного потока, чтобы они <em>не блокировали</em> выполнение JavaScript кода. Поставленные в очередь операции завершатся как можно скорее, а затем вернут свои результаты в среду JavaScript .</p> -<h3 id="Промисы_и_функции_обратного_вызова">Промисы и функции обратного вызова</h3> +<h3 id="Промисы_и_колбэк-функции">Промисы и колбэк-функции</h3> -<p>Промисы имеют некоторое сходство со старомодными функциями обратного вызова. По сути, они являются возвращаемым объектом, к которому вы присоединяете функции обратного вызова, вместо того, чтобы передавать обратные вызовы в функцию.</p> +<p>Промисы имеют некоторое сходство со старомодными колбэк-функциями. По сути, они являются возвращаемым объектом, к которому вы присоединяете колбэк-функции, вместо того, чтобы передавать колбэки в функцию.</p> -<p>Тем не менее, промисы сделаны специально для обработки асинхронных операций, и имеют много преимуществ по сравнению с обратными вызовами:</p> +<p>Тем не менее, промисы сделаны специально для обработки асинхронных операций, и имеют много преимуществ по сравнению с колбэками:</p> <ul> - <li>Вы можете объединить несколько асинхронных операций вместе, используя несколько операций<code>.then()</code>, передавая результат одного в следующий в качестве входных данных. Это гораздо сложнее сделать с обратными вызовами, которые часто заканчиваются массивным «адом обратных вызовов» (также известным как <a href="http://callbackhell.com/">callback hell</a>).</li> + <li>Вы можете объединить несколько асинхронных операций вместе, используя несколько операций<code>.then()</code>, передавая результат одного в следующий в качестве входных данных. Это гораздо сложнее сделать с колбэками, которые часто заканчиваются массивным «адом колбэков» (также известным как <a href="http://callbackhell.com/">callback hell</a>).</li> <li>Обратные вызовы Promise всегда вызываются в строгом порядке, который они помещают в очередь событий..</li> <li>Обработка ошибок намного лучше — все ошибки обрабатываются одним блоком <code>.catch ()</code> в конце блока, а не обрабатываются индивидуально на каждом уровне «пирамиды».</li> - <li>Промисы избегают инверсии управления, в отличие от обратных вызовов, которые теряют полный контроль над тем, как будет выполняться функция при передаче обратного вызова в стороннюю библиотеку.</li> + <li>Промисы избегают инверсии управления, в отличие от колбэков, которые теряют полный контроль над тем, как будет выполняться функция при передаче колбэка в стороннюю библиотеку.</li> </ul> <h2 id="Природа_асинхронного_кода">Природа асинхронного кода</h2> |