GeezerVison is showing javascript.info — Delaying decorator
back to the lessonDelaying decorator
importance: 5
Create a decorator delay(f, ms) that delays each call of f by ms milliseconds.
For instance:
function f(x) {
alert(x);
}
// create wrappers
let f1000 = delay(f, 1000);
let f1500 = delay(f, 1500);
f1000("test"); // shows "test" after 1000ms
f1500("test"); // shows "test" after 1500ms
In other words, delay(f, ms) returns a “delayed by ms” variant of f.
In the code above, f is a function of a single argument, but your solution should pass all arguments and the context this.
Open a sandbox with tests.
The solution:
function delay(f, ms) {
return function() {
setTimeout(() => f.apply(this, arguments), ms);
};
}
let f1000 = delay(alert, 1000);
f1000("test"); // shows "test" after 1000ms
Please note how an arrow function is used here. As we know, arrow functions do not have own this and arguments, so f.apply(this, arguments) takes this and arguments from the wrapper.
If we pass a regular function, setTimeout would call it without arguments and this=window (assuming we’re in the browser).
We still can pass the right this by using an intermediate variable, but that’s a little bit more cumbersome:
function delay(f, ms) {
return function(...args) {
let savedThis = this; // store this into an intermediate variable
setTimeout(function() {
f.apply(savedThis, args); // use it here
}, ms);
};
}
Open the solution with tests in a sandbox.