aboutsummaryrefslogtreecommitdiff
path: root/files/ru/learn/javascript/asynchronous
diff options
context:
space:
mode:
authorAlexey Pyltsyn <lex61rus@gmail.com>2021-10-27 02:31:24 +0300
committerGitHub <noreply@github.com>2021-10-27 02:31:24 +0300
commit980fe00a74a9ad013b945755415ace2e5429c3c2 (patch)
treea1c6bb4b302e69bfa53eab13e44500eba55d1696 /files/ru/learn/javascript/asynchronous
parent374a039b97a11ee7306539d16aaab27fed66b398 (diff)
downloadtranslated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.tar.gz
translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.tar.bz2
translated-content-980fe00a74a9ad013b945755415ace2e5429c3c2.zip
[RU] Remove notranslate (#2874)
Diffstat (limited to 'files/ru/learn/javascript/asynchronous')
-rw-r--r--files/ru/learn/javascript/asynchronous/async_await/index.html44
-rw-r--r--files/ru/learn/javascript/asynchronous/concepts/index.html18
-rw-r--r--files/ru/learn/javascript/asynchronous/introducing/index.html22
-rw-r--r--files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html64
4 files changed, 74 insertions, 74 deletions
diff --git a/files/ru/learn/javascript/asynchronous/async_await/index.html b/files/ru/learn/javascript/asynchronous/async_await/index.html
index 7280fe9843..e64c9cc30b 100644
--- a/files/ru/learn/javascript/asynchronous/async_await/index.html
+++ b/files/ru/learn/javascript/asynchronous/async_await/index.html
@@ -36,36 +36,36 @@ translation_of: Learn/JavaScript/Asynchronous/Async_await
<p>Попробуйте выполнить в консоли браузера следующий код:</p>
-<pre class="brush: js notranslate">function hello() { return "Hello" };
+<pre class="brush: js">function hello() { return "Hello" };
hello();</pre>
<p>Функция возвращает "Hello" — ничего необычного, верно ?</p>
<p>Но что если мы сделаем её асинхронной ? Проверим:</p>
-<pre class="brush: js notranslate">async function hello() { return "Hello" };
+<pre class="brush: js">async function hello() { return "Hello" };
hello();</pre>
<p>Как было сказано ранее, вызов асинхронной функции возвращает объект Promise.</p>
<p>Вот пример с <a href="/en-US/docs/Web/JavaScript/Reference/Operators/async_function">async function expression</a>:</p>
-<pre class="brush: js notranslate">let hello = async function() { return "Hello" };
+<pre class="brush: js">let hello = async function() { return "Hello" };
hello();</pre>
<p>Также можно использовать стрелочные функции:</p>
-<pre class="brush: js notranslate">let hello = async () =&gt; { return "Hello" };</pre>
+<pre class="brush: js">let hello = async () =&gt; { return "Hello" };</pre>
<p>Все они в общем случае делают одно и то же.</p>
<p>Чтобы получить значение, которое возвращает Promise, мы как обычно можем использовать метод <code>.then()</code>:</p>
-<pre class="brush: js notranslate">hello().then((value) =&gt; console.log(value))</pre>
+<pre class="brush: js">hello().then((value) =&gt; console.log(value))</pre>
<p>или ещё короче</p>
-<pre class="brush: js notranslate">hello().then(console.log)
+<pre class="brush: js">hello().then(console.log)
</pre>
<p>Итак, ключевое слово <code>async</code>, превращает обычную функцию в асинхронную и результат вызова функции оборачивает в Promise. Также асинхронная функция позволяет использовать в своём теле ключевое слово await, о котором далее.</p>
@@ -78,7 +78,7 @@ hello();</pre>
<p>Небольшой пример:</p>
-<pre class="brush: js notranslate">async function hello() {
+<pre class="brush: js">async function hello() {
return greeting = await Promise.resolve("Hello");
};
@@ -90,7 +90,7 @@ hello().then(alert);</pre>
<p>Давайте посмотрим на пример из предыдущей статьи:</p>
-<pre class="brush: js notranslate">fetch('coffee.jpg')
+<pre class="brush: js">fetch('coffee.jpg')
.then(response =&gt; {
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
@@ -110,7 +110,7 @@ hello().then(alert);</pre>
<p>К этому моменту вы должны понимать как работают Promises, чтобы понять все остальное. Давайте перепишем код используя async/await и оценим разницу.</p>
-<pre class="brush: js notranslate">async function myFetch() {
+<pre class="brush: js">async function myFetch() {
let response = await fetch('coffee.jpg');
if (!response.ok) {
@@ -134,7 +134,7 @@ myFetch()
<p>Так как ключевое слово <code>async</code> заставляет функцию вернуть Promise, мы можем использовать гибридный подход:</p>
-<pre class="brush: js notranslate">async function myFetch() {
+<pre class="brush: js">async function myFetch() {
let response = await fetch('coffee.jpg');
if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
@@ -160,7 +160,7 @@ myFetch().then((blob) =&gt; {
<br>
Пример:</p>
-<pre class="brush: js notranslate">let response = await fetch('coffee.jpg');</pre>
+<pre class="brush: js">let response = await fetch('coffee.jpg');</pre>
<p>Значение Promise, которое вернёт <code>fetch()</code> будет присвоено переменной <code>response</code> только тогда, когда оно будет доступно - парсер делает паузу на данной строке дожидаясь этого момента. Как только значение доступно, парсер переходит к следующей строке, в которой создаётся объект <code><a href="/en-US/docs/Web/API/Blob">Blob</a></code> из результата Promise. В этой строке, кстати, также используется <code>await</code>, потому что метод <code>.blob()</code> также возвращает Promise. Когда результат готов, мы возвращаем его наружу из <code>myFetch()</code>.</p>
@@ -175,7 +175,7 @@ myFetch().then((blob) =&gt; {
<p>Мы можем использовать синхронную <code><a href="/en-US/docs/Web/JavaScript/Reference/Statements/try...catch">try...catch</a></code> структуру с <code>async</code>/<code>await</code>. Вот изменённая версия первого примера выше:</p>
-<pre class="brush: js notranslate">async function myFetch() {
+<pre class="brush: js">async function myFetch() {
try {
let response = await fetch('coffee.jpg');
@@ -199,7 +199,7 @@ myFetch();</pre>
<p>Если вы хотите использовать гибридный подходы (пример выше), лучше использовать блок <code>.catch()</code> после блока <code>.then()</code> вот так:</p>
-<pre class="brush: js notranslate">async function myFetch() {
+<pre class="brush: js">async function myFetch() {
let response = await fetch('coffee.jpg');
if (!response.ok) {
  throw new Error(`HTTP error! status: ${response.status}`);
@@ -233,7 +233,7 @@ myFetch().then((blob) =&gt; {
<p>Версия с async/await (смотрите <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/promise-all-async-await.html">live demo</a> и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/promise-all-async-await.html">source code</a>), сейчас выглядит так:</p>
-<pre class="brush: js notranslate">async function fetchAndDecode(url, type) {
+<pre class="brush: js">async function fetchAndDecode(url, type) {
let response = await fetch(url);
let content;
@@ -282,7 +282,7 @@ displayContent()
<p>Вы видите, что мы легко изменили <code>fetchAndDecode()</code> функцию в асинхронный вариант. Взгляните на строку с <code>Promise.all()</code>:</p>
-<pre class="brush: js notranslate">let values = await Promise.all([coffee, tea, description]);</pre>
+<pre class="brush: js">let values = await Promise.all([coffee, tea, description]);</pre>
<p>С помощью <code>await</code> мы ждём массив результатов всех трёх Promises и присваиваем его в переменную <code>values</code>. Это асинхронный код, но он написан в синхронном стиле, за счёт чего он гораздо читабельнее.<br>
<br>
@@ -306,7 +306,7 @@ displayContent()
<p>Мы подготовили два примера  — <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/slow-async-await.html">slow-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/slow-async-await.html">source code</a>) и <a href="https://mdn.github.io/learning-area/javascript/asynchronous/async-await/fast-async-await.html">fast-async-await.html</a> (см. <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/async-await/fast-async-await.html">source code</a>). Они оба начинаются с функции возвращающей promise, имитирующей асинхронность процессов при помощи вызова <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout">setTimeout()</a></code>:</p>
-<pre class="brush: js notranslate">function timeoutPromise(interval) {
+<pre class="brush: js">function timeoutPromise(interval) {
return new Promise((resolve, reject) =&gt; {
setTimeout(function(){
resolve("done");
@@ -316,13 +316,13 @@ displayContent()
<p>Далее в каждом примере есть асинхронная функция  <code>timeTest()</code> ожидающая три вызова <code>timeoutPromise()</code>:</p>
-<pre class="brush: js notranslate">async function timeTest() {
+<pre class="brush: js">async function timeTest() {
...
}</pre>
<p>В каждом примере функция записывает время начала исполнения и сколько времени понадобилось на исполнение  <code>timeTest()</code>  промисов, вычитая время в момент запуска функции из времени в момент разрешения промисов:</p>
-<pre class="brush: js notranslate">let startTime = Date.now();
+<pre class="brush: js">let startTime = Date.now();
timeTest().then(() =&gt; {
let finishTime = Date.now();
let timeTaken = finishTime - startTime;
@@ -333,7 +333,7 @@ timeTest().then(() =&gt; {
<p>В случае с медленным примером <code>slow-async-await.html</code>, <code>timeTest()</code> выглядит:</p>
-<pre class="brush: js notranslate">async function timeTest() {
+<pre class="brush: js">async function timeTest() {
await timeoutPromise(3000);
await timeoutPromise(3000);
await timeoutPromise(3000);
@@ -343,7 +343,7 @@ timeTest().then(() =&gt; {
<p>Во втором  <code>fast-async-await.html</code> примере, функция <code>timeTest()</code> выглядит как:</p>
-<pre class="brush: js notranslate">async function timeTest() {
+<pre class="brush: js">async function timeTest() {
const timeoutPromise1 = timeoutPromise(3000);
const timeoutPromise2 = timeoutPromise(3000);
const timeoutPromise3 = timeoutPromise(3000);
@@ -365,7 +365,7 @@ timeTest().then(() =&gt; {
<p>В качестве последнего замечания, вы можете использовать  <code>async</code>  перед методами классов или объектов, вынуждая их возвращать promises. А также  await внутри методов объявленных таким образом. Посмотрите на пример <a href="/en-US/docs/Learn/JavaScript/Objects/Inheritance#ECMAScript_2015_Classes">ES class code, который мы наблюдали в статье  object-oriented JavaScript</a>,  и сравните его с модифицированной (асинхронной) <code>async</code> версией ниже:</p>
-<pre class="brush: js notranslate">class Person {
+<pre class="brush: js">class Person {
constructor(first, last, age, gender, interests) {
this.name = {
first,
@@ -389,7 +389,7 @@ let han = new Person('Han', 'Solo', 25, 'male', ['Smuggling']);</pre>
<p>Первый метод класса теперь можно использовать таким образом:</p>
-<pre class="brush: js notranslate">han.greeting().then(console.log);</pre>
+<pre class="brush: js">han.greeting().then(console.log);</pre>
<h2 id="Browser_support_Поддержка_браузерами">Browser support (Поддержка браузерами)</h2>
diff --git a/files/ru/learn/javascript/asynchronous/concepts/index.html b/files/ru/learn/javascript/asynchronous/concepts/index.html
index bdc84b6f72..fe4e6c7343 100644
--- a/files/ru/learn/javascript/asynchronous/concepts/index.html
+++ b/files/ru/learn/javascript/asynchronous/concepts/index.html
@@ -45,7 +45,7 @@ translation_of: Learn/JavaScript/Asynchronous/Concepts
<p>В нашем <a href="https://github.com/mdn/learning-area/tree/master/javascript/asynchronous/introducing">simple-sync.html</a> примере (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync.html">see it running live</a>), добавим кнопке событие на клик, чтобы при нажатии на неё запускалась трудоёмкая операция (расчёт 10000000 дат, и вывод последней рассчитанной даты на консоль) после чего в DOM добавляется ещё один параграф:</p>
-<pre class="brush: js notranslate">const btn = document.querySelector('button');
+<pre class="brush: js">const btn = document.querySelector('button');
btn.addEventListener('click', () =&gt; {
let myDate;
for(let i = 0; i &lt; 10000000; i++) {
@@ -75,7 +75,7 @@ btn.addEventListener('click', () =&gt; {
<li>Кнопка "Click me for alert", при нажатии показывает предупреждение.</li>
</ul>
-<pre class="brush: js notranslate">function expensiveOperation() {
+<pre class="brush: js">function expensiveOperation() {
for(let i = 0; i &lt; 1000000; i++) {
ctx.fillStyle = 'rgba(0,0,255, 0.2)';
ctx.beginPath();
@@ -102,24 +102,24 @@ alertBtn.addEventListener('click', () =&gt;
<p>Под <strong>потоком,</strong> обычно, понимают одиночный процесс, который может использовать программа, для выполнения своих нужд. Каждый поток может выполнять только одну в текущий момент времени:</p>
-<pre class="notranslate">Task A --&gt; Task B --&gt; Task C</pre>
+<pre>Task A --&gt; Task B --&gt; Task C</pre>
<p>Каждая задача будет выполнена последовательно; только когда текущая задача завершится, следующая сможет начаться.</p>
<p>Как мы говорили выше, большинство компьютеров теперь имеют процессор с несколькими ядрами, т.е. могут выполнять несколько задач одновременно. Языки программирования, поддерживающие многопоточность, могут использовать несколько ядер, чтобы выполнять несколько задач одновременно:</p>
-<pre class="notranslate">Thread 1: Task A --&gt; Task B
+<pre>Thread 1: Task A --&gt; Task B
Thread 2: Task C --&gt; Task D</pre>
<h3 id="JavaScript_однопоточный">JavaScript однопоточный</h3>
<p>JavaScript, традиционно для скриптовых языков, однопоточный. Даже, если есть несколько ядер, вы можете использовать их только для выполнения задач в одном потоке, называемом <strong>основной поток</strong>. Наш пример выше, выполняется следующим образом:</p>
-<pre class="notranslate">Main thread: Render circles to canvas --&gt; Display alert()</pre>
+<pre>Main thread: Render circles to canvas --&gt; Display alert()</pre>
<p>В итоге, JavaScript получил несколько инструментов, которые могут помочь в решении подобных проблем. <a href="/en-US/docs/Web/API/Web_Workers_API">Web workers</a> позволяют вам обработать некоторый JavaScript-код в отдельном потоке, который называется обработчик, таким образом вы можете запускать отдельные блоки JavaScript-кода одновременно. В основном, вы будете использовать воркеры, чтобы запустить ресурсоёмкий процесс, отдельно от основного потока, чтобы не блокировать действия пользователя.</p>
-<pre class="notranslate"> Main thread: Task A --&gt; Task C
+<pre> Main thread: Task A --&gt; Task C
Worker thread: Expensive task B</pre>
<p>Помня об этом, выполните наш следующий пример <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/simple-sync-worker.html">simple-sync-worker.html</a> (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/simple-sync-worker.html">посмотреть пример в действии</a>), с открытой консолью. Это переписанный предыдущий пример, который теперь рассчитывает 10 миллионов дат в отдельном потоке обработчика. Теперь, когда вы нажимаете на кнопку, браузер может добавить новый элемент на страницу, до того как все даты будут посчитаны. Самая первая операция больше не блокирует выполнение следующей.</p>
@@ -130,18 +130,18 @@ Worker thread: Expensive task B</pre>
<p>Следующая проблема заключается в том, что даже если код запущенный в воркере ничего не блокирует, он в целом остаётся синхронным. Это проблема появляется, когда какой-то функции требуются результаты выполнения нескольких предыдущих функций. Рассмотрим следующую диаграмму потоков:</p>
-<pre class="notranslate">Main thread: Task A --&gt; Task B</pre>
+<pre>Main thread: Task A --&gt; Task B</pre>
<p>В этом примере, предположим Task A делает что-то вроде получения картинки с сервера а Task B затем делает что-нибудь с полученной картинкой, например, применяет к ней фильтр. Если запустить выполняться Task A и тут же попытаться выполнить Task B, то вы получите ошибку, поскольку картинка ещё не будет доступна.</p>
-<pre class="notranslate"> Main thread: Task A --&gt; Task B --&gt; |Task D|
+<pre> Main thread: Task A --&gt; Task B --&gt; |Task D|
Worker thread: Task C -----------&gt; | |</pre>
<p>Теперь, давайте предположим, что Task D использует результат выполнения обеих задач Task B и Task C. Если мы уверенны, что оба результата будут доступны одновременно, тогда не возникнет проблем, однако, часто это не так. Если Task D попытаться запустить, когда какого-то нужного ей результата ещё нет, выполнение закончится ошибкой.</p>
<p>Чтобы избежать подобных проблем, браузеры позволяют нам выполнять определённые операции асинхронно. Такие возможности, как <a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise">Promises</a> позволяют запустить некоторую операцию (например, получение картинки с сервера), и затем подождать пока операция не вернёт результат, перед тем как начать выполнение другой задачи:</p>
-<pre class="notranslate">Main thread: Task A Task B
+<pre>Main thread: Task A Task B
Promise: |__async operation__|</pre>
<p>Поскольку операция выполняется где-то отдельно, основной поток не блокируется, при выполнении асинхронных задач.</p>
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
<p>Большая часть функциональности, которую мы рассматривали в предыдущих обучающих модулях, является синхронной — вы запускаете какой-то код, а результат возвращается, как только браузер может его вернуть. Давайте рассмотрим простой пример ( посмотрите <a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/basic-function.html">онлайн</a>, как это работает и посмотрите <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/basic-function.html">исходный код</a>):</p>
-<pre class="brush: js notranslate">const btn = document.querySelector('button');
+<pre class="brush: js">const btn = document.querySelector('button');
btn.addEventListener('click', () =&gt; {
alert('You clicked me!');
@@ -65,7 +65,7 @@ btn.addEventListener('click', () =&gt; {
<p>Так и в примере выше: после нажатия кнопки абзац не сможет появиться пока не будет нажата кнопка OK в окне сообщения. Попробуйте сами:</p>
<div class="hidden">
-<pre class="brush: html notranslate">&lt;<span class="pl-ent">button</span>&gt;Нажми меня&lt;/<span class="pl-ent">button</span>&gt;</pre>
+<pre class="brush: html">&lt;<span class="pl-ent">button</span>&gt;Нажми меня&lt;/<span class="pl-ent">button</span>&gt;</pre>
</div>
<p>{{EmbedLiveSample('Синхронный_JavaScript', '100%', '70px')}}</p>
@@ -80,7 +80,7 @@ btn.addEventListener('click', () =&gt; {
<p>Почему трудно работать, используя синхронный код? Давайте посмотрим на небольшой пример. Когда вы получаете картинку с сервера, вы не можете мгновенно вернуть результат. Это значит что следующий (псевдо) код не сработает:</p>
-<pre class="brush: js notranslate">let response = fetch('myImage.png');
+<pre class="brush: js">let response = fetch('myImage.png');
let blob = response.blob();
// display your image blob in the UI somehow</pre>
@@ -94,7 +94,7 @@ let blob = response.blob();
<p>Пример асинхронного колбэка вторым параметром {{domxref("EventTarget.addEventListener", "addEventListener()")}} (как мы видели выше):</p>
-<pre class="brush: js notranslate">btn.addEventListener('click', () =&gt; {
+<pre class="brush: js">btn.addEventListener('click', () =&gt; {
alert('You clicked me!');
let pElem = document.createElement('p');
@@ -108,7 +108,7 @@ let blob = response.blob();
<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) {
+<pre class="brush: js">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);</pre>
<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'];
+<pre class="brush: js">const gods = ['Apollo', 'Artemis', 'Ares', 'Zeus'];
gods.forEach(function (eachName, index){
console.log(index + '. ' + eachName);
@@ -148,7 +148,7 @@ gods.forEach(function (eachName, index){
<p>Промисы — новый стиль написания асинхронного кода, который используется в современных Web API. Хорошим примером является <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/fetch">fetch()</a></code> API, который современнее и эффективнее чем {{domxref("XMLHttpRequest")}}. Посмотрим на краткий пример, из нашей статьи <a href="/en-US/docs/Learn/JavaScript/Client-side_web_APIs/Fetching_data">Fetching data from the server</a>:</p>
-<pre class="brush: js notranslate">fetch('products.json').then(function(response) {
+<pre class="brush: js">fetch('products.json').then(function(response) {
  return response.json();
}).then(function(json) {
  products = json;
@@ -195,7 +195,7 @@ gods.forEach(function (eachName, index){
<p>Давайте рассмотрим пример, который дополнительно иллюстрирует природу асинхронного кода, показывая, что может произойти, когда мы не полностью осознаем порядок выполнения кода, и проблемы, связанные с попыткой трактовать асинхронный код как синхронный. Следующий пример довольно похож на тот, что мы видели раньше (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/introducing/async-sync.html">запустите пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">посмотреть исходный код</a>). Одно из отличий состоит в том, что мы включили ряд операторов {{domxref("console.log()")}} чтобы проиллюстрировать порядок, в котором, как вы думаете, будет выполняться код.</p>
-<pre class="brush: js notranslate">console.log ('Starting');
+<pre class="brush: js">console.log ('Starting');
let image;
fetch('coffee.jpg').then((response) =&gt; {
@@ -226,7 +226,7 @@ console.log ('All done!');</pre>
<p>Если вы запутались, рассмотрим следующий небольшой пример:</p>
-<pre class="brush: js notranslate">console.log("registering click handler");
+<pre class="brush: js">console.log("registering click handler");
button.addEventListener('click', () =&gt; {
console.log("get click");
@@ -240,11 +240,11 @@ console.log("all done");</pre>
<p>Чтобы увидеть это в действии, попробуйте взять локальную копию нашего <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/introducing/async-sync.html">примера</a> и измените третий вызов <code>console.log ()</code> следующим образом:</p>
-<pre class="brush: js notranslate">console.log ('All done! ' + image + 'displayed.');</pre>
+<pre class="brush: js">console.log ('All done! ' + image + 'displayed.');</pre>
<p>Теперь вместо третьего сообщения должна возникнуть следующая ошибка:</p>
-<pre class="notranslate"><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">TypeError: image is undefined; can't access its "src" property</span></span></span></pre>
+<pre><span class="message-body-wrapper"><span class="message-flex-body"><span class="devtools-monospace message-body">TypeError: image is undefined; can't access its "src" property</span></span></span></pre>
<p>Это происходит потому, что в то же время браузер пытается запустить третий <code>console.log()</code>, блок <code>fetch()</code> ещё не закончил выполнение, поэтому переменная <code>image</code> ещё не имеет значения.</p>
diff --git a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html
index 8d00ba98af..19019a19a9 100644
--- a/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html
+++ b/files/ru/learn/javascript/asynchronous/timeouts_and_intervals/index.html
@@ -64,13 +64,13 @@ original_slug: Learn/JavaScript/Asynchronous/Таймауты_и_интерва
<p>В следующем примере, браузер будет ожидать две секунды перед тем как  выполнит анонимную функцию, тогда отобразит сообщение (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">живой пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/simple-settimeout.html">исходный код</a>):</p>
-<pre class="brush: js notranslate">let myGreeting = setTimeout(function() {
+<pre class="brush: js">let myGreeting = setTimeout(function() {
alert('Hello, Mr. Universe!');
}, 2000)</pre>
<p>Указанные вами функции не обязательно должны быть анонимными. Вы можете дать своей функции имя и даже определить её где-нибудь ещё и передать ссылку на функцию в setTimeout (). Следующие две версии фрагмента кода эквивалентны первой:</p>
-<pre class="brush: js notranslate">// С именованной функцией
+<pre class="brush: js">// С именованной функцией
let myGreeting = setTimeout(function sayHi() {
alert('Hello, Mr. Universe!');
}, 2000)
@@ -92,19 +92,19 @@ let myGreeting = setTimeout(sayHi, 2000);</pre>
<p>Например, вы можете реорганизовать предыдущую функцию, чтобы она передавала привет любому имени, переданному ей:</p>
-<pre class="brush: js notranslate">function sayHi(who) {
+<pre class="brush: js">function sayHi(who) {
alert(`Hello ${who}!`);
}</pre>
<p>Теперь вы можете передать имя в вызов setTimeout () в качестве третьего параметра:</p>
-<pre class="brush: js notranslate">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
+<pre class="brush: js">let myGreeting = setTimeout(sayHi, 2000, 'Mr. Universe');</pre>
<h3 id="Очистка_таймаутов">Очистка таймаутов</h3>
<p>Наконец, если был создан тайм-аут, вы можете отменить его до истечения указанного времени, вызвав <code><a href="/en-US/docs/Web/API/WindowOrWorkerGlobalScope/clearTimeout">clearTimeout()</a></code>, передав ему идентификатор вызова <code>setTimeout()</code> в качестве параметра. Итак, чтобы отменить указанный выше тайм-аут, вы должны сделать следующее:</p>
-<pre class="brush: js notranslate">clearTimeout(myGreeting);</pre>
+<pre class="brush: js">clearTimeout(myGreeting);</pre>
<div class="blockIndicator note">
<p><strong>Note</strong>: См.<code><a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/greeter-app.html">greeter-app.html</a></code> для более полной демонстрации, которая позволяет вам указать имя для приветствия и отменить приветствие с помощью отдельной кнопки (<a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/greeter-app.html">см. исходный код</a>).</p>
@@ -118,7 +118,7 @@ let myGreeting = setTimeout(sayHi, 2000);</pre>
<p>Давайте посмотрим на пример. Следующая функция создаёт новый объект <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date">Date()</a></code>, с помощью <code><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleTimeString">toLocaleTimeString()</a></code> извлекает из него строку с временем и отображает её в пользовательском интерфейсе. Затем он запускает функцию один раз в секунду с помощью <code>setInterval()</code>, создавая эффект цифровых часов, которые обновляются раз в секунду (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/setinterval-clock.html"> реальный пример</a>, и <a href="https://github.com/mdn/learning-area/blob/master/javascript/asynchronous/loops-and-intervals/setinterval-clock.html">исходный код</a>):</p>
-<pre class="brush: js notranslate">function displayTime() {
+<pre class="brush: js">function displayTime() {
let date = new Date();
let time = date.toLocaleTimeString();
document.getElementById('demo').textContent = time;
@@ -132,7 +132,7 @@ const createClock = setInterval(displayTime, 1000);</pre>
<p><code>setInterval () </code>выполняет задачу постоянно. setInterval () продолжает выполнять задачу вечно, если вы что-то с ней не сделаете. Возможно, вам понадобится способ остановить такие задачи, иначе вы можете получить ошибки, если браузер не сможет выполнить какие-либо другие версии задачи или если анимация, обрабатываемая задачей, завершилась. Вы можете сделать это так же, как останавливаете <code>timeouts</code> - передавая идентификатор, возвращаемый вызовом <code>setInterval ()</code>, в функцию <code>clearInterval ()</code>:</p>
-<pre class="brush: js notranslate">const myInterval = setInterval(myFunction, 2000);
+<pre class="brush: js">const myInterval = setInterval(myFunction, 2000);
clearInterval(myInterval);</pre>
@@ -182,7 +182,7 @@ clearInterval(myInterval);</pre>
<p>В приведённом ниже примере используется рекурсивный setTimeout () для запуска переданной функции каждые 100 миллисекунд:</p>
-<pre class="brush: js notranslate">let i = 1;
+<pre class="brush: js">let i = 1;
setTimeout(function run() {
console.log(i);
@@ -192,7 +192,7 @@ setTimeout(function run() {
<p>Сравните приведённый выше пример со следующим - здесь используется <code>setInterval ()</code> для достижения того же эффекта:</p>
-<pre class="brush: js notranslate">let i = 1;
+<pre class="brush: js">let i = 1;
setInterval(function run() {
console.log(i);
@@ -217,7 +217,7 @@ setInterval(function run() {
<p>Например, код приведённый ниже (<a href="https://mdn.github.io/learning-area/javascript/asynchronous/loops-and-intervals/zero-settimeout.html">рабочий код</a>) выводит alert содержащий <code>"Hello"</code>, затем alert содержащий <code>"World"</code> как только вы нажмёте ОК в первом alert.</p>
-<pre class="brush: js notranslate">setTimeout(function() {
+<pre class="brush: js">setTimeout(function() {
alert('World');
}, 0);
@@ -243,7 +243,7 @@ alert('Hello');</pre>
<p>Метод принимает в качестве аргумента колбэк, который должен быть вызван перед перерисовкой. Это общий шаблон, в котором он используется:</p>
-<pre class="brush: js notranslate">function draw() {
+<pre class="brush: js">function draw() {
// Drawing code goes here
requestAnimationFrame(draw);
}
@@ -272,7 +272,7 @@ draw();</pre>
<p>Давайте поговорим ещё немного о том, чем метод <code>requestAnimationFrame ()</code> отличается от других методов, используемых ранее. Глядя на наш код сверху:</p>
-<pre class="brush: js notranslate">function draw() {
+<pre class="brush: js">function draw() {
// Drawing code goes here
requestAnimationFrame(draw);
}
@@ -281,7 +281,7 @@ draw();</pre>
<p>Такой же код с использованием <code>setInterval()</code>:</p>
-<pre class="brush: js notranslate">function draw() {
+<pre class="brush: js">function draw() {
// Drawing code goes here
}
@@ -297,7 +297,7 @@ setInterval(draw, 17);</pre>
<p>Это полезно, поскольку позволяет запускать вещи в определённое время и в постоянном темпе, независимо от того, насколько быстрым или медленным может быть ваше устройство. Общий шаблон, который вы бы использовали, выглядит примерно так:</p>
-<pre class="brush: js notranslate">let startTime = null;
+<pre class="brush: js">let startTime = null;
function draw(timestamp) {
if (!startTime) {
@@ -337,7 +337,7 @@ draw();</pre>
<li>
<p>Примените следующий CSS к HTML шаблону (любым предпочитаемым способом). Он установ красный фон на странице, высоту <code>&lt;body&gt;</code> равную <code>100%</code> высоты {{htmlelement("html")}} , и центрирует <code>&lt;div&gt;</code> внутри <code>&lt;body&gt;</code>, по горизонтали и вертикали.</p>
- <pre class="brush: css notranslate">html {
+ <pre class="brush: css">html {
background-color: white;
height: 100%;
}
@@ -362,7 +362,7 @@ div {
<li>
<p>Разместите следующий JavaScript-код в  <code>&lt;script&gt;</code> . Здесь вы сохраняете ссылку на <code>&lt;div&gt;</code> внутри, устанавливаете для переменной <code>rotateCount</code> значение <code>0</code>, устанавливаете неинициализированную переменную, которая позже будет использоваться для хранения ссылки на вызов <code>requestAnimationFrame()</code>, и устанавливаете для переменной <code>startTime</code> значение <code>null</code>, которая будет позже использоваться для хранения времени начала <code>requestAnimationFrame()</code>.</p>
- <pre class="brush: js notranslate">const spinner = document.querySelector('div');
+ <pre class="brush: js">const spinner = document.querySelector('div');
let rotateCount = 0;
let startTime = null;
let rAF;
@@ -371,14 +371,14 @@ let rAF;
<li>
<p>Под предыдущим кодом вставьте функцию <code>draw()</code> которая будет использоваться для хранения нашего кода анимации, который включает параметр <code>timestamp</code> :</p>
- <pre class="brush: js notranslate">function draw(timestamp) {
+ <pre class="brush: js">function draw(timestamp) {
}</pre>
</li>
<li>
<p>Внутри <code>draw ()</code> добавьте следующие строки. Они определят время начала, если оно ещё не определено (это произойдёт только на первой итерации цикла), и установят для параметра <code>rotateCount</code> значение для поворота счётчика (текущая временная метка, возьмите начальную временную метку, разделённую на три, чтобы замедлиться):</p>
- <pre class="brush: js notranslate"> if (!startTime) {
+ <pre class="brush: js"> if (!startTime) {
startTime = timestamp;
}
@@ -388,22 +388,22 @@ let rAF;
<li>
<p>Под предыдущей строкой внутри <code>draw ()</code> добавьте следующий блок - он проверяет, превышает ли значение <code>rotateCount 359</code> (например, <code>360</code>, полный круг). Если это так, он устанавливает значение по модулю <code>360</code> (то есть остаток, оставшийся после деления значения на <code>360</code>), поэтому круговая анимация может продолжаться непрерывно с разумным низким значением. Обратите внимание, что это не является строго необходимым, но легче работать со значениями от 0 до <code>359</code> градусов, чем со значениями типа «<code>128000</code> градусов».</p>
- <pre class="brush: js notranslate">if (rotateCount &gt; 359) {
+ <pre class="brush: js">if (rotateCount &gt; 359) {
rotateCount %= 360;
}</pre>
</li>
<li>Затем, под предыдущим блоком, добавьте следующую строку, чтобы вращать spinner:
- <pre class="brush: js notranslate">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
+ <pre class="brush: js">spinner.style.transform = `rotate(${rotateCount}deg)`;</pre>
</li>
<li>
<p>В самом низу внутри функции <em>draw ()</em> вставьте следующую строку. Это ключ ко всей операции - вы устанавливаете для переменной, определённой ранее, активный вызов<em> requestAnimation ()</em>, который принимает функцию <em>draw ()</em> в качестве своего параметра. Это запускает анимацию, постоянно выполняя функцию <em>draw ()</em> со скоростью, близкой к 60 FPS.</p>
- <pre class="brush: js notranslate">rAF = requestAnimationFrame(draw);</pre>
+ <pre class="brush: js">rAF = requestAnimationFrame(draw);</pre>
</li>
<li>
<p>Ниже, вызовите функцию <code>draw()</code> для запуска анимации.</p>
- <pre class="brush: js notranslate">draw();</pre>
+ <pre class="brush: js">draw();</pre>
</li>
</ol>
@@ -417,7 +417,7 @@ let rAF;
<p>Просто передайте ему значение, возвращаемое вызовом requestAnimationFrame () для отмены, которое вы сохранили в переменной rAF:</p>
-<pre class="brush: js notranslate">cancelAnimationFrame(rAF);</pre>
+<pre class="brush: js">cancelAnimationFrame(rAF);</pre>
<h3 id="Активное_обучение_запуск_и_остановка_нашей_анимации">Активное обучение: запуск и остановка нашей анимации</h3>
@@ -444,7 +444,7 @@ let rAF;
<p>В этом примере вы должны анимировать как положение персонажа на экране, так и отображаемый спрайт. В анимации спрайта всего 6 кадров. Если бы вы показывали разные кадры спрайта для каждого кадра, отображаемого на экране, с помощью requestAnimationFrame (), Guybrush двигал бы конечностями слишком быстро, и анимация выглядела бы нелепо. Следовательно, в этом примере регулируется скорость, с которой спрайт циклически повторяет свои кадры, используя следующий код:</p>
-<pre class="brush: js notranslate">if (posX % 13 === 0) {
+<pre class="brush: js">if (posX % 13 === 0) {
if (sprite === 5) {
sprite = 0;
} else {
@@ -456,7 +456,7 @@ let rAF;
<p>... Фактически, это примерно каждые 6,5 кадров, поскольку мы обновляем posX (положение персонажа на экране) на два кадра:</p>
-<pre class="brush: js notranslate">if (posX &gt; width/2) {
+<pre class="brush: js">if (posX &gt; width/2) {
newStartPos = -( (width/2) + 102 );
posX = Math.ceil(newStartPos / 13) * 13;
console.log(posX);
@@ -485,7 +485,7 @@ let rAF;
<li>
<p>Внутри пустого элемента {{htmlelement("script")}} на вашей странице, начните с добавления следующих строк кода, которые определяют некоторые переменные и константы, которые вам понадобятся в дальнейшем:</p>
- <pre class="brush: js notranslate">const spinner = document.querySelector('.spinner p');
+ <pre class="brush: js">const spinner = document.querySelector('.spinner p');
const spinnerContainer = document.querySelector('.spinner');
let rotateCount = 0;
let startTime = null;
@@ -508,7 +508,7 @@ const result = document.querySelector('.result');</pre>
<li>
<p>Ниже добавьте следующую функцию. Она просто берёт два числа и возвращает случайное число между ними. Это понадобится вам позже, чтобы сгенерировать случайный интервал ожидания.</p>
- <pre class="brush: js notranslate">function random(min,max) {
+ <pre class="brush: js">function random(min,max) {
var num = Math.floor(Math.random()*(max-min)) + min;
return num;
}</pre>
@@ -516,7 +516,7 @@ const result = document.querySelector('.result');</pre>
<li>
<p>Затем добавьте функцию draw(), которая анимирует спиннер. Это очень похоже на версию из предыдущего примера простого счётчика:</p>
- <pre class="brush: js notranslate">function draw(timestamp) {
+ <pre class="brush: js">function draw(timestamp) {
if(!startTime) {
startTime = timestamp;
}
@@ -534,13 +534,13 @@ const result = document.querySelector('.result');</pre>
<li>
<p>Теперь пришло время настроить начальное состояние приложения при первой загрузке страницы. Добавьте следующие две строки, которые просто скрывают абзац результатов и контейнер счётчика с помощью <code>display: none</code> ;.</p>
- <pre class="brush: js notranslate">result.style.display = 'none';
+ <pre class="brush: js">result.style.display = 'none';
spinnerContainer.style.display = 'none';</pre>
</li>
<li>
<p>Затем определите функцию<code> reset ()</code>, которая возвращает приложение в исходное состояние, необходимое для повторного запуска игры после её завершения. Добавьте в конец кода следующее:</p>
- <pre class="brush: js notranslate">function reset() {
+ <pre class="brush: js">function reset() {
btn.style.display = 'block';
result.textContent = '';
result.style.display = 'none';
@@ -549,7 +549,7 @@ spinnerContainer.style.display = 'none';</pre>
<li>
<p>Хорошо, хватит подготовки! Пришло время сделать игру доступной! Добавьте в свой код следующий блок. Функция <code>start ()</code> вызывает <code>draw ()</code>, чтобы запустить вращение спиннера и отобразить его в пользовательском интерфейсе, скрыть кнопку Start, чтобы вы не могли испортить игру, запустив её несколько раз одновременно, и запускает вызов <code>setTimeout ()</code>, который выполняется функция <code>setEndgame ()</code> по прошествии случайного интервала от 5 до 10 секунд. Следующий блок также добавляет обработчик событий к вашей кнопке для запуска функции <code>start ()</code> при её нажатии.</p>
- <pre class="brush: js notranslate">btn.addEventListener('click', start);
+ <pre class="brush: js">btn.addEventListener('click', start);
function start() {
draw();
@@ -569,7 +569,7 @@ function start() {
<li>
<p>Добавьте в свой код следующую функцию:</p>
- <pre class="brush: js notranslate">function setEndgame() {
+ <pre class="brush: js">function setEndgame() {
cancelAnimationFrame(rAF);
spinnerContainer.style.display = 'none';
result.style.display = 'block';