Skip to content

Translate Decorators and forwarding, call/apply into French #43

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Jul 21, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
function spy(func) {
// your code
// votre code
}


Original file line number Diff line number Diff line change
@@ -1 +1 @@
Here we can use `calls.push(args)` to store all arguments in the log and `f.apply(this, args)` to forward the call.
Ici, nous pouvons utiliser `calls.push(args)` pour stocker tous les arguments dans le log et `f.apply(this, args)` pour transférer l'appel.
Original file line number Diff line number Diff line change
Expand Up @@ -2,17 +2,17 @@ importance: 5

---

# Spy decorator
# Décorateur spy

Create a decorator `spy(func)` that should return a wrapper that saves all calls to function in its `calls` property.
Créez un décorateur `spy(func)` qui devrait renvoyer un wrapper qui enregistre tous les appels à la fonction dans sa propriété `calls`.

Every call is saved as an array of arguments.
Chaque appel est enregistré sous la forme d'un tableau d'arguments.

For instance:
Par exemple:

```js
function work(a, b) {
alert( a + b ); // work is an arbitrary function or method
alert( a + b ); // work est une fonction ou une méthode arbitraire
}

*!*
Expand All @@ -27,4 +27,4 @@ for (let args of work.calls) {
}
```

P.S. That decorator is sometimes useful for unit-testing. Its advanced form is `sinon.spy` in [Sinon.JS](http://sinonjs.org/) library.
P.S. Ce décorateur est parfois utile pour les tests unitaires. Sa forme avancée est `sinon.spy` dans la bibliothèque [Sinon.JS](http://sinonjs.org/).
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
The solution:
La solution:

```js run demo
function delay(f, ms) {
Expand All @@ -11,22 +11,22 @@ function delay(f, ms) {

let f1000 = delay(alert, 1000);

f1000("test"); // shows "test" after 1000ms
f1000("test"); // montre "test" après 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.
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.

If we pass a regular function, `setTimeout` would call it without arguments and `this=window` (assuming we're in the browser).
Si nous passons une fonction régulière, `setTimeout` l'appellera sans arguments et `this = window` (en supposant que nous sommes dans le navigateur).

We still can pass the right `this` by using an intermediate variable, but that's a little bit more cumbersome:
Nous pouvons toujours passer le bon `this` en utilisant une variable intermédiaire, mais c'est un peu plus lourd:

```js
function delay(f, ms) {

return function(...args) {
let savedThis = this; // store this into an intermediate variable
let savedThis = this; // stocker "this" dans une variable intermédiaire
setTimeout(function() {
f.apply(savedThis, args); // use it here
f.apply(savedThis, args); // utilisez-le ici
}, ms);
};

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,25 @@ importance: 5

---

# Delaying decorator
# Décorateur de retardement

Create a decorator `delay(f, ms)` that delays each call of `f` by `ms` milliseconds.
Créez un décorateur `delay(f, ms)` qui retarde chaque appel de `f` de `ms` millisecondes.

For instance:
Par exemple:

```js
function f(x) {
alert(x);
}

// create wrappers
// créer des wrappers
let f1000 = delay(f, 1000);
let f1500 = delay(f, 1500);

f1000("test"); // shows "test" after 1000ms
f1500("test"); // shows "test" after 1500ms
f1000("test"); // montre "test" après 1000ms
f1500("test"); // montre "test" après 1500ms
```

In other words, `delay(f, ms)` returns a "delayed by `ms`" variant of `f`.
En d'autres termes, `delay(f, ms)` renvoie une variante "retardée de `ms`" de `f`.

In the code above, `f` is a function of a single argument, but your solution should pass all arguments and the context `this`.
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`.
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@ function debounce(f, ms) {
}
```

A call to `debounce` returns a wrapper. There may be two states:
Un appel à `debounce` renvoie un wrapper. Il peut y avoir deux états:

- `isCooldown = false` -- ready to run.
- `isCooldown = true` -- waiting for the timeout.
- `isCooldown = false` -- prêt à exécuter.
- `isCooldown = true` -- en attente du timeout.

In the first call `isCooldown` is falsy, so the call proceeds, and the state changes to `true`.
Lors du premier appel, `is Cooldown` est fausse. L'appel se poursuit et l'état passe à` true`.

While `isCooldown` is true, all other calls are ignored.
Alors que `isCooldown` est vrai, tous les autres appels sont ignorés.

Then `setTimeout` reverts it to `false` after the given delay.
Ensuite, `setTimeout` le rétablit à `false` après le délai imparti.
Original file line number Diff line number Diff line change
Expand Up @@ -2,23 +2,23 @@ importance: 5

---

# Debounce decorator
# Décorateur debounce

The result of `debounce(f, ms)` decorator should be a wrapper that passes the call to `f` at maximum once per `ms` milliseconds.
Le résultat du décorateur `debounce(f, ms)` devrait être un wrapper qui transmet l'appel à `f` au maximum une fois par `ms`, millisecondes.

In other words, when we call a "debounced" function, it guarantees that all other future in the closest `ms` milliseconds will be ignored.
En d’autres termes, lorsque nous appelons une fonction "debounce", elle garantit que tous les autres appels futurs dans les millisecondes `ms` les plus proches seront ignorés.

For instance:
Par exemple:

```js no-beautify
let f = debounce(alert, 1000);

f(1); // runs immediately
f(2); // ignored
f(1); // exécute immédiatement
f(2); // ignorée

setTimeout( () => f(3), 100); // ignored ( only 100 ms passed )
setTimeout( () => f(4), 1100); // runs
setTimeout( () => f(5), 1500); // ignored (less than 1000 ms from the last run)
setTimeout( () => f(3), 100); // ignorée (seulement 100 ms passé)
setTimeout( () => f(4), 1100); // exécute
setTimeout( () => f(5), 1500); // ignorée (moins de 1000 ms à partir de la dernière exécution)
```

In practice `debounce` is useful for functions that retrieve/update something when we know that nothing new can be done in such a short period of time, so it's better not to waste resources.
En pratique, `debounce` est utile pour les fonctions qui récupèrent/mettent à jour quelque chose quand on sait que rien de nouveau ne peut être fait dans un laps de temps aussi court, il est donc préférable de ne pas gaspiller de ressources.
Original file line number Diff line number Diff line change
Expand Up @@ -7,23 +7,23 @@ function throttle(func, ms) {
function wrapper() {

if (isThrottled) {
// memo last arguments to call after the cooldown
// mémo derniers arguments à appeler après le temps de recharge
savedArgs = arguments;
savedThis = this;
return;
}

// otherwise go to cooldown state
// sinon aller en état de recharge
func.apply(this, arguments);

isThrottled = true;

// plan to reset isThrottled after the delay
// prévoir de réinitialiser isThrottled après le délai
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
// s'il y a eu des appels, savedThis/savedArgs auront le dernier
// appel récursif exécute la fonction et redéfinit le temps de recharge
wrapper.apply(savedThis, savedArgs);
savedArgs = savedThis = null;
}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -30,10 +30,10 @@ function throttle(func, ms) {
}
```

A call to `throttle(func, ms)` returns `wrapper`.
Un appel à `throttle(func, ms)` retourne `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. Lors du premier appel, le `wrapper` exécute simplement `func` et définit l'état de refroidissement (`isThrottled = true`).
2. Dans cet état, tous les appels sont mémorisés dans `savedArgs/savedThis`. Veuillez noter que le contexte et les arguments sont d'égale importance et doivent être mémorisés. Nous avons besoin d'eux simultanément pour reproduire l'appel.
3. ...Ensuite, après le passage de `ms` millisecondes,`setTimeout` se déclenche. L'état de refroidissement est supprimé (`isThrottled = false`). Et si nous avions ignoré les appels, alors `wrapper` est exécuté avec les derniers arguments et contextes mémorisés.

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.
La 3ème étape n’exécute pas `func`, mais `wrapper`, car nous devons non seulement exécuter `func`, mais encore une fois entrer dans l’état de refroidissement et configurer le délai d’expiration pour le réinitialiser.
Original file line number Diff line number Diff line change
Expand Up @@ -2,47 +2,47 @@ importance: 5

---

# Throttle decorator
# Décorateur d'étranglement

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.
Créez un décorateur "d'étranglement" `throttle(f, ms)` - qui retourne un wrapper, en passant l'appel à `f` au maximum une fois par `ms` millisecondes. Les appels qui tombent dans le "temps de recharge" sont ignorés.

**The difference with `debounce` -- if an ignored call is the last during the cooldown, then it executes at the end of the delay.**
**La différence avec `debounce` - si un appel ignoré est le dernier pendant le temps de recharge, il s'exécute à la fin du délai.**

Let's check the real-life application to better understand that requirement and to see where it comes from.
Examinons l'application réelle pour mieux comprendre cette exigence et voir d'où elle vient.

**For instance, we want to track mouse movements.**
**Par exemple, nous voulons suivre les mouvements de la souris.**

In browser we can setup a function to run at every mouse 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).
Dans le navigateur, nous pouvons configurer une fonction à exécuter à chaque mouvement de la souris et obtenir l’emplacement du pointeur à mesure qu’il se déplace. Pendant une utilisation active de la souris, cette fonction est généralement utilisée très souvent et peut atteindre 100 fois par seconde (toutes les 10 ms).

**The tracking function should update some information on the web-page.**
**La fonction de suivi devrait mettre à jour certaines informations sur la page Web.**

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.
La mise à jour de la fonction `update()` est trop lourde pour le faire à chaque micro-mouvement. Cela n’a également aucun sens de le faire plus d’une fois toutes les 100 ms.

So we'll wrap it into the decorator: use `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.
Nous allons donc l'envelopper dans le décorateur: utilisez `throttle(update, 100)` comme fonction à exécuter à chaque déplacement de souris à la place de `update()` d'origine. Le décorateur sera appelé souvent, mais `update()` sera appelé au maximum une fois toutes les 100 ms.

Visually, it will look like this:
Visuellement, cela ressemblera à ceci:

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. Pour le premier mouvement de souris, la variante décorée passe l'appel à `update`. Cela est important, l'utilisateur voit notre réaction à leur mouvement immédiatement.
2. Puis, alors que la souris continue d'avancer, il ne se passe plus rien jusqu'à 100ms. La variante décorée ignore les appels.
3. À la fin de `100ms` - une autre `update` se produit avec les dernières coordonnées.
4. Enfin, la souris s’arrête quelque part. La variante décorée attend que `100ms` expire, puis lance `update` avec les dernières coordonnées. Donc, peut-être le plus important, les coordonnées finales de la souris sont traitées.

A code example:
Un exemple de code:

```js
function f(a) {
console.log(a)
};

// f1000 passes calls to f at maximum once per 1000 ms
// f1000 passe les appels à f au maximum une fois toutes les 1000 ms
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); // montre 1
f1000(2); // (étranglement, 1000ms pas encore écoulée)
f1000(3); // (étranglement, 1000ms pas encore écoulée)

// when 1000 ms time out...
// ...outputs 3, intermediate value 2 was ignored
// quand 1000ms expirent...
// ...sort 3, la valeur intermédiaire 2 a été ignorée
```

P.S. Arguments and the context `this` passed to `f1000` should be passed to the original `f`.
P.S. Les arguments et le contexte `this` transmis à `f1000` doivent être transmis à `f` d'origine.
Loading