Ми хочемо зробити цей проєкт з відкритим кодом доступним для людей у всьому світі.

Допоможіть перекласти цей підручник вашою мовою!

назад до уроку

Затримуючий декоратор

важливість: 5

Створіть декоратор delay(f, ms), яка затримує кожен виклик f на ms мілісекунд.

Наприклад:

function f(x) { alert(x); } // створюємо обгортки let f1000 = delay(f, 1000); let f1500 = delay(f, 1500); f1000("тест"); // показує "test" після 1000 мс f1500("тест"); // показує "test" після 1500 мс

Іншими словами, delay(f, ms) повертає варіант f з “затримкою на ms”.

У коді вище, функція f приймає лише один аргумент, але ваше рішення повинно передавати всі аргументи та контекст this.

Відкрити пісочницю з тестами.

Рішення:

function delay(f, ms) { return function() { setTimeout(() => f.apply(this, arguments), ms); }; } let f1000 = delay(alert, 1000); f1000("тест"); // показує "тест" після 1000 мс

Зверніть увагу, як тут використовується стрілочна функція. Як відомо, стрілочні функції не мають власних this та arguments, тому f.apply(this, arguments) бере this та arguments з обгортки.

Якщо ми передамо звичайну функцію, setTimeout буде викликати її без аргументів, а this=window (припускаючи, що ми знаходимося в браузері).

Ми все ще можемо передати коректний this за допомогою проміжної змінної, але це трохи більш громіздко:

function delay(f, ms) { return function(...args) { let savedThis = this; // зберігаємо this в проміжну змінну setTimeout(function() { f.apply(savedThis, args); // використовуємо її тут }, ms); }; }

Відкрити рішення із тестами в пісочниці.