GeezerVison is showing fr.javascript.info — Décorateur de retardement
retour au coursDécorateur de retardement
importance: 5
Créez un décorateur delay(f, ms) qui retarde chaque appel de f de ms millisecondes.
Par exemple:
function f(x) {
alert(x);
}
// créer des wrappers
let f1000 = delay(f, 1000);
let f1500 = delay(f, 1500);
f1000("test"); // montre "test" après 1000ms
f1500("test"); // montre "test" après 1500ms
En d’autres termes, delay(f, ms) renvoie une variante “retardée de ms” de f.
Dans le code ci-dessus, f est une fonction d’un seul argument, mais votre solution doit transmettre tous les arguments et le contexte this.
Open a sandbox with tests.
La solution:
function delay(f, ms) {
return function() {
setTimeout(() => f.apply(this, arguments), ms);
};
}
let f1000 = delay(alert, 1000);
f1000("test"); // montre "test" après 1000ms
Veuillez noter comment une fonction fléchée est utilisée ici. Comme nous le savons, les fonctions fléchées ne possèdent pas leurs propres this et arguments, aussi f.apply(this, arguments) prend this et arguments du wrapper.
Si nous passons une fonction régulière, setTimeout l’appellera sans arguments et this = window (en supposant que nous sommes dans le navigateur).
Nous pouvons toujours passer le bon this en utilisant une variable intermédiaire, mais c’est un peu plus lourd:
function delay(f, ms) {
return function(...args) {
let savedThis = this; // stocker "this" dans une variable intermédiaire
setTimeout(function() {
f.apply(savedThis, args); // utilisez-le ici
}, ms);
};
}
Ouvrez la solution avec des tests dans une sandbox.