From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- .../javascript/asynchronous/introducing/index.html | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) (limited to 'files/ru/learn/javascript/asynchronous/introducing') diff --git a/files/ru/learn/javascript/asynchronous/introducing/index.html b/files/ru/learn/javascript/asynchronous/introducing/index.html index 2d457b6888..0b53770834 100644 --- a/files/ru/learn/javascript/asynchronous/introducing/index.html +++ b/files/ru/learn/javascript/asynchronous/introducing/index.html @@ -36,7 +36,7 @@ translation_of: Learn/JavaScript/Asynchronous/Introducing

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

-
const btn = document.querySelector('button');
+
const btn = document.querySelector('button');
 btn.addEventListener('click', () => {
   alert('You clicked me!');
 
@@ -65,7 +65,7 @@ btn.addEventListener('click', () => {
 
Так и в примере выше: после нажатия кнопки абзац не сможет появиться пока не будет нажата кнопка OK в окне сообщения. Попробуйте сами:

 
 
 
 
{{EmbedLiveSample('Синхронный_JavaScript', '100%', '70px')}}

@@ -80,7 +80,7 @@ btn.addEventListener('click', () => {
 
 
Почему трудно работать, используя синхронный код? Давайте посмотрим на небольшой пример. Когда вы получаете картинку с сервера, вы не можете мгновенно вернуть результат. Это значит что следующий (псевдо) код не сработает:

 
-
let response = fetch('myImage.png');
+
let response = fetch('myImage.png');
 let blob = response.blob();
 // display your image blob in the UI somehow

 
@@ -94,7 +94,7 @@ let blob = response.blob();
 
 
Пример асинхронного колбэка вторым параметром {{domxref("EventTarget.addEventListener", "addEventListener()")}} (как мы видели выше):

 
-
btn.addEventListener('click', () => {
+
btn.addEventListener('click', () => {
   alert('You clicked me!');
 
   let pElem = document.createElement('p');
@@ -108,7 +108,7 @@ let blob = response.blob();
 
 
Вы можете написать свою собственную функцию, содержащую колбэк-функцию. Давайте взглянем на ещё один пример, в котором происходит загрузка ресурсов через XMLHttpRequest API (запустите пример, и посмотрите исходный код):

 
-
function loadAsset(url, type, callback) {
+
function loadAsset(url, type, callback) {
   let xhr = new XMLHttpRequest();
   xhr.open('GET', url);
   xhr.responseType = type;
@@ -136,7 +136,7 @@ loadAsset('coffee.jpg', 'blob', displayImage);

 
 
Заметьте, что не все колбэк-функции асинхронны — некоторые запускаются синхронно. Например, при использовании {{jsxref("Array.prototype.forEach()")}} для перебора элементов массива (запустите пример, и посмотрите исходный код):

 
-
const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus'];
+
const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus'];
 
 gods.forEach(function (eachName, index){
   console.log(index + '. ' + eachName);
@@ -148,7 +148,7 @@ gods.forEach(function (eachName, index){
 
 
Промисы — новый стиль написания асинхронного кода, который используется в современных Web API. Хорошим примером является fetch() API, который современнее и эффективнее чем {{domxref("XMLHttpRequest")}}. Посмотрим на краткий пример, из нашей статьи Fetching data from the server:

 
-
fetch('products.json').then(function(response) {
+
fetch('products.json').then(function(response) {
   return response.json();
 }).then(function(json) {
   products = json;
@@ -195,7 +195,7 @@ gods.forEach(function (eachName, index){
 
 
Давайте рассмотрим пример, который дополнительно иллюстрирует природу асинхронного кода, показывая, что может произойти, когда мы не полностью осознаем порядок выполнения кода, и проблемы, связанные с попыткой трактовать асинхронный код как синхронный. Следующий пример довольно похож на тот, что мы видели раньше (запустите пример, и посмотреть исходный код). Одно из отличий состоит в том, что мы включили ряд операторов {{domxref("console.log()")}} чтобы проиллюстрировать порядок, в котором, как вы думаете, будет выполняться код.

 
-
console.log ('Starting');
+
console.log ('Starting');
 let image;
 
 fetch('coffee.jpg').then((response) => {
@@ -226,7 +226,7 @@ console.log ('All done!');

 
 
Если вы запутались, рассмотрим следующий небольшой пример:

 
-
console.log("registering click handler");
+
console.log("registering click handler");
 
 button.addEventListener('click', () => {
   console.log("get click");
@@ -240,11 +240,11 @@ console.log("all done");

 
 
Чтобы увидеть это в действии, попробуйте взять локальную копию нашего примера и измените третий вызов console.log () следующим образом:

 
-
console.log ('All done! ' + image + 'displayed.');

+
console.log ('All done! ' + image + 'displayed.');

 
 
Теперь вместо третьего сообщения должна возникнуть следующая ошибка:

 
-
TypeError: image is undefined; can't access its "src" property

+
TypeError: image is undefined; can't access its "src" property

 
 
Это происходит потому, что в то же время браузер пытается запустить третий console.log(), блок fetch() ещё не закончил выполнение, поэтому переменная image ещё не имеет значения.

 
-- 
cgit v1.2.3-54-g00ecf