04-throttle

Author: mykhaliuk

1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/solution.js

@@ -7,28 +7,28 @@ function throttle(func, ms) {
   function wrapper() {
 
     if (isThrottled) {
-      // memo last arguments to call after the cooldown
+      // запоминаем последние аргументы для вызова после задержки
       savedArgs = arguments;
       savedThis = this;
       return;
     }
 
-    // otherwise go to cooldown state
+    // в противном случае переходим в состояние задержки
     func.apply(this, arguments);
 
     isThrottled = true;
 
-    // plan to reset isThrottled after the delay
+    // настройка сброса isThrottled после задержки
     setTimeout(function() {
       isThrottled = false;
       if (savedArgs) {
-        // if there were calls, savedThis/savedArgs have the last one
-        // recursive call runs the function and sets cooldown again
+        // если были вызовы, последний savedThis/savedArgs
+        // рекурсивный вызов запускает функцию и снова устанавливает время задержки
         wrapper.apply(savedThis, savedArgs);
         savedArgs = savedThis = null;
       }
     }, ms);
   }
 
   return wrapper;
-}
+}

1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/_js.view/test.js

@@ -11,37 +11,37 @@ describe("throttle(f, 1000)", function() {
     this.clock = sinon.useFakeTimers();
   });
 
-  it("the first call runs now", function() {
-    f1000(1); // runs now
+  it("1-й вызов происходит немедленно", function() {
+    f1000(1); // вызов происходит немедленно
     assert.equal(log, "1");
   });
 
-  it("then calls are ignored till 1000ms when the last call works", function() {
-    f1000(2); // (throttling - less than 1000ms since the last run)
-    f1000(3); // (throttling - less than 1000ms since the last run)
-    // after 1000 ms f(3) call is scheduled
+  it("далее вызовы игнорируются до истечения 1000 мс от полседнего вызова", function() {
+    f1000(2); // (задержка - менее 1000 мс с момента последнего вызов)
+    f1000(3); // (задержка - менее 1000 мс с момента последнего вызов)
+    // запланирован вызов спустя f(3) 1000 мс
 
-    assert.equal(log, "1"); // right now only the 1st call done
+    assert.equal(log, "1"); //  происходит 1-й вызов
 
-    this.clock.tick(1000); // after 1000ms...
-    assert.equal(log, "13"); // log==13, the call to f1000(3) is made
+    this.clock.tick(1000); // через 1000 мс...
+    assert.equal(log, "13"); // log==13, произошел вызов f1000(3)
   });
 
-  it("the third call waits 1000ms after the second call", function() {
+  it("3-й вызов ждет 1000 мс от 2-го", function() {
     this.clock.tick(100);
-    f1000(4); // (throttling - less than 1000ms since the last run)
+    f1000(4); // (задержка - менее 1000 мс с момента последнего вызов)
     this.clock.tick(100);
-    f1000(5); // (throttling - less than 1000ms since the last run)
+    f1000(5); // (задержка - менее 1000 мс с момента последнего вызов)
     this.clock.tick(700);
-    f1000(6); // (throttling - less than 1000ms since the last run)
+    f1000(6); // (задержка - менее 1000 мс с момента последнего вызов)
 
-    this.clock.tick(100); // now 100 + 100 + 700 + 100 = 1000ms passed
+    this.clock.tick(100); // теперь прошло 100 + 100 + 700 + 100 = 1000 мс
 
-    assert.equal(log, "136"); // the last call was f(6)
+    assert.equal(log, "136"); // последний вызов был f(6)
   });
 
   after(function() {
     this.clock.restore();
   });
 
-});
+});

1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/solution.md

@@ -30,10 +30,10 @@ function throttle(func, ms) {
 }
 ```
 
-A call to `throttle(func, ms)` returns `wrapper`.
+Вызов `throttle(func, ms)` возвращает `wrapper`.
 
-1. During the first call, the `wrapper` just runs `func` and sets the cooldown state (`isThrottled = true`).
-2. In this state all calls memorized in `savedArgs/savedThis`. Please note that both the context and the arguments are equally important and should be memorized. We need them simultaneously to reproduce the call.
-3. ...Then after `ms` milliseconds pass, `setTimeout` triggers. The cooldown state is removed (`isThrottled = false`). And if we had ignored calls, then `wrapper` is executed with last memorized arguments and context.
+1. Во время первого вызова обёртка просто вызывает `func` и устанавливает состояние задержки (`isThrottled = true`).
+2. В этом состоянии все вызовы, запоминаются в `saveArgs / saveThis`. Обратите внимание, что контекст и аргументы одинаково важны и должны быть запомнены. Они нам нужны для того, чтобы воспроизвести вызов.
+3. ... Затем по прошествии `ms` миллисекунд срабатывает `setTimeout`. Состояние задержки сбрасывается (`isThrottled = false`). И если мы проигнорировали вызовы, то «обёртка» выполняется с последними запомненными аргументами и контекстом.
 
-The 3rd step runs not `func`, but `wrapper`, because we not only need to execute `func`, but once again enter the cooldown state and setup the timeout to reset it.
+На третьем шаге выполняется не `func`, а `wrapper`, потому что нам нужно не только выполнить `func`, но и еще раз установить состояние задержки и таймаут для его сброса.

1-js/06-advanced-functions/09-call-apply-decorators/04-throttle/task.md

@@ -1,48 +1,48 @@
-importance: 5
+важность: 5
 
 ---
 
-# Throttle decorator
+# Задерживающий декоратор
 
-Create a "throttling" decorator `throttle(f, ms)` -- that returns a wrapper, passing the call to `f` at maximum once per `ms` milliseconds. Those calls that fall into the "cooldown" period, are ignored.
+Создайте "задерживающий" декоратор `throttle(f, ms)` - который возвращает обёртку, передавая вызов в `f` не более одного раза в `ms` миллисекунд. Те вызовы, которые попадают в период "задержки", игнорируются.
 
-**The difference with `debounce` -- if an ignored call is the last during the cooldown, then it executes at the end of the delay.**
+**Вариант с `debounce` - если проигнорированный вызов является последним во время "задержки", то он выполняется в конце.**
 
-Let's check the real-life application to better understand that requirement and to see where it comes from.
+Давайте рассмотрим реальное приложение, чтобы лучше понять это требование и выяснить, откуда оно взято.
 
-**For instance, we want to track mouse movements.**
+**Например, мы хотим отслеживать движения указателя.**
 
-In browser we can setup a function to run at every mouse micro-movement and get the pointer location as it moves. During an active mouse usage, this function usually runs very frequently, can be something like 100 times per second (every 10 ms).
+В браузере мы можем объявить функцию, которая будет запускаться при каждом микродвижении указателя и получать его местоположение при каждом его перемещении. Во время активного использования мыши эта функция запускается очень часто, это может происходить около 100 раз в секунду (каждые 10 мс).
 
-**The tracking function should update some information on the web-page.**
+**Отслеживающая функция должна обновлять некоторую информацию на веб-странице.**
 
-Updating function `update()` is too heavy to do it on every micro-movement. There is also no sense in making it more often than once per 100ms.
+Функция обновления `update()` слишком ресурсоёмкая, чтобы делать это при каждом микродвижении. Также нет смысла делать это чаще, чем один раз в 100 мс.
 
-So we'll assign `throttle(update, 100)` as the function to run on each mouse move instead of the original `update()`. The decorator will be called often, but `update()` will be called at maximum once per 100ms.
+Поэтому мы объявим `throttle(update, 100)` как функцию, которая будет запускаться при каждом перемещении указателя вместо оригинальной `update()`. Декоратор будет вызываться часто, но `update()` будет вызываться максимум раз в 100 мс.
 
-Visually, it will look like this:
+Визуально это будет выглядеть вот так:
 
-1. For the first mouse movement the decorated variant passes the call to `update`. That's important, the user sees our reaction to their move immediately.
-2. Then as the mouse moves on, until `100ms` nothing happens. The decorated variant ignores calls.
-3. At the end of `100ms` -- one more `update` happens with the last coordinates. 
-4. Then, finally, the mouse stops somewhere. The decorated variant waits until `100ms` expire and then runs `update` with last coordinates. So, perhaps the most important, the final mouse coordinates are processed.
+1. Для первого движения указателя декорированный вариант передает вызов в `update`. Это важно, т.к. пользователь сразу видит нашу реакцию на его перемещение.
+2. Затем, когда указатель продолжает движение, в течение 100 мс ничего не происходит. Декорированный вариант игнорирует вызовы.
+3. По истечению 100 мс происходит еще одно «обновление» с последними координатами. 
+4. Затем, наконец, указатель где-то останавливается. Декорированный вариант ждет, пока не истечет 100 мс и затем вызывает `update` с последними координатами. Так что, пожалуй, самое главное то, что окончательные координаты указателя обработаны.
 
-A code example:
+Пример кода:
 
 ```js
 function f(a) {
   console.log(a)
-};
+}
 
-// f1000 passes calls to f at maximum once per 1000 ms
+// f1000 передает вызовы f максимум раз в 1000 мс
 let f1000 = throttle(f, 1000);
 
-f1000(1); // shows 1
-f1000(2); // (throttling, 1000ms not out yet)
-f1000(3); // (throttling, 1000ms not out yet)
+f1000(1); // показывает 1
+f1000(2); // (ограничение, 1000 мс еще нет)
+f1000(3); // (ограничение, 1000 мс еще нет)
 
-// when 1000 ms time out...
-// ...outputs 3, intermediate value 2 was ignored
+// когда 1000 мс истекли ...
+// ...выводим 3, промежуточное значение 2 было проигнорировано
 ```
 
-P.S. Arguments and the context `this` passed to `f1000` should be passed to the original `f`.
+P.S.: Аргументы и контекст `this`, переданные в `f1000`, должны быть переданы в оригинальную `f`.