Сборка от 17 марта 2017 г

Тормозилка

важность: 5

Напишите функцию throttle(f, ms) – «тормозилку», которая возвращает обёртку, передающую вызов f не чаще, чем раз в ms миллисекунд.

У этой функции должно быть важное существенное отличие от debounce : если игнорируемый вызов оказался последним, т.е. после него до окончания задержки ничего нет – то он выполнится.

Чтобы лучше понять, откуда взялось это требование, и как throttle должна работать – разберём реальное применение, на которое и ориентирована эта задача.

Например, нужно обрабатывать передвижения мыши.

В JavaScript это делается функцией, которая будет запускаться при каждом микро‑передвижении мыши и получать координаты курсора. По мере того, как мышь двигается, эта функция может запускаться очень часто, может быть 100 раз в секунду (каждые 10 мс).

Функция обработки передвижения должна обновлять некую информацию на странице.

При этом обновление – слишком «тяжёлый» процесс, чтобы делать его при каждом микро‑передвижении. Имеет смысл делать его раз в 100 мс, не чаще.

Пусть функция, которая осуществляет это обновление по передвижению, называется onmousemove .

Вызов throttle(onmousemove, 100) , по сути, предназначен для того, чтобы «притормаживать» обработку onmousemove . Технически, он должен возвращать обёртку, которая передаёт все вызовы onmousemove , но не чаще чем раз в 100 мс.

При этом промежуточные движения можно игнорировать, но мышь в конце концов где‑то остановится. И это последнее, итоговое положение мыши обязательно нужно обработать!

Визуально это даст следующую картину обработки перемещений мыши:

1. 
   Первое обновление произойдёт сразу (это важно, посетитель тут же видит реакцию на своё действие).
   
2. 
   Дальше может быть много вызовов (микро‑передвижений) с разными координатами, но пока не пройдёт 100 мс – ничего не будет.
   
3. 
   По истечении 100 мс – опять обновление, с последними координатами. Промежуточные микро‑передвижения игнорированы.
   
4. 
   В конце концов мышь где‑то остановится, обновление по окончании очередной паузы 100 мс сработает с последними координатами.
   

Ещё раз заметим – задача из реальной жизни, и в ней принципиально важно, что последнее передвижение обрабатывается. Пользователь должен увидеть, где остановил мышь.

Пример использования:

var f = function(a) { console.log(a)

};

// затормозить функцию до одного раза в 1000 мс var f1000 = throttle(f, 1000);

f1000(1); // выведет 1

f1000(2); // (тормозим, не прошло 1000 мс) f1000(3); // (тормозим, не прошло 1000 мс)

// когда пройдёт 1000 мс...

// выведет 3, промежуточное значение 2 игнорируется

Открыть песочницу с тестами для задачи. ^

К решению

Запуск кода из строки: eval

Функция eval(code) позволяет выполнить код, переданный ей в виде строки. Этот код будет выполнен в текущей области видимости.