Skip to content

Commit 553b999

Browse files
nazarepiedadynazarepiedady
committed
docs: update call-apply-decorators/debounce article
1 parent 2deb617 commit 553b999

File tree

5 files changed

+29
-29
lines changed

5 files changed

+29
-29
lines changed

‎1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/_js.view/test.js‎

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -7,33 +7,33 @@ describe('debounce', function () {
77
this.clock.restore();
88
});
99

10-
it('para uma chamada - executa-o depois de dados milissegundos', function () {
10+
it('para uma chamada - execute-a após um determinado ms', function () {
1111
const f = sinon.spy();
1212
const debounced = debounce(f, 1000);
1313

1414
debounced('test');
1515
assert(f.notCalled, 'não é chamada imediatamente');
1616
this.clock.tick(1000);
17-
assert(f.calledOnceWith('test'), 'é chamada depois de 1000ms');
17+
assert(f.calledOnceWith('test'), 'chamada após 1000ms');
1818
});
1919

20-
it('para 3 chamadas - execute a última depois de dados milissegundos', function () {
20+
it('para 3 chamadas - executa a última após determinados ms', function () {
2121
const f = sinon.spy();
2222
const debounced = debounce(f, 1000);
2323

2424
debounced('a');
25-
setTimeout(() => debounced('b'), 200); // ignorada (cedo demais)
26-
setTimeout(() => debounced('c'), 500); // executa (1000ms passados)
25+
setTimeout(() => debounced('b'), 200); // ignorada (demasiado cedo)
26+
setTimeout(() => debounced('c'), 500); // executar (1000ms passados)
2727
this.clock.tick(1000);
2828

29-
assert(f.notCalled, 'não é chamada depois de 1000ms');
29+
assert(f.notCalled, 'não é chamada após 1000ms');
3030

3131
this.clock.tick(500);
3232

33-
assert(f.calledOnceWith('c'), 'é chamada depois de 1500ms');
33+
assert(f.calledOnceWith('c'), 'chamada após 1500ms');
3434
});
3535

36-
it('preserva o contexto da chamada', function () {
36+
it('mantém o contexto da chamada', function () {
3737
let obj = {
3838
f() {
3939
assert.equal(this, obj);

‎1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.svg‎

Lines changed: 1 addition & 1 deletion
Loading

‎1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/debounce.view/index.html‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
11
<!doctype html>
22
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.js"></script>
33

4-
A função <code>handler</code> é chamada neste campo de entrada:
4+
A função <code>handler</code> é chamada nesta entrada:
55
<br>
66
<input id="input1" placeholder="type here">
77

88
<p>
99

10-
A função de debounce <code>debounce(handler, 1000)</code> é chamada neste campo de entrada:
10+
A função <code>debounce(handler, 1000)</code> reduzida é chamada nesta entrada:
1111
<br>
1212
<input id="input2" placeholder="type here">
1313

1414
<p>
15-
<button id="result">O <code>handler</code> coloca o resultado aqui</button>
15+
<button id="result">A <code>handler</code> coloca o resultado aqui</button>
1616

1717
<script>
1818
function handler(event) {

‎1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/solution.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,4 +9,4 @@ function debounce(func, ms) {
99

1010
```
1111

12-
Uma chamada de `debounce` retorna um encapsulador. Quando chamada, ela agenda a chamada original da função depois de certos `ms` e cancela o tempo de espera (timeout) anterior.
12+
Uma chamada à `debounce` retorna um embrulhador. Quando chamado, este agenda a chamada da função original depois de dados `ms` e cancela o tempo de espera anterior.

‎1-js/06-advanced-functions/09-call-apply-decorators/03-debounce/task.md‎

Lines changed: 16 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -2,50 +2,50 @@ importance: 5
22

33
---
44

5-
# O decorador Debounce
5+
# Decorador de Redução
66

7-
O resultado do decorador `debounce(f, ms)` é um encapsulador que suspende chamadas de `f` até haver `ms` milissegundos de inactividade (nenhuma chamada, "período de espera"), depois invoca `f` uma vez com os últimos argumentos.
7+
O resultado do decorador `debounce(f, ms)` é um embrulhador que suspende as chamadas à `f` até existir `ms` milissegundos de inatividade (nenhuma chamada, "período de arrefecimento"), depois invoca `f` uma vez com os argumentos mais recentes.
88

9-
Por outras palavras, `debounce` é como uma secretária que aceita "chamadas telefónicas", e espera até existirem `ms` milissegundos de inatividade. E, somente então transfere a informação da última chamada para "o chefe" (chama a `f` atual).
9+
Por outras palavras, `debounce` é como uma secretária que aceita "chamadas telefónicas", e espera até existir `ms` milissegundos de silêncio. E apenas depois transfere a informação da chamada mais recente ao "chefe" (chama a verdadeira `f`).
1010

11-
Por exemplo, tinhamos uma função `f` e a substituimos por `f = debounce(f, 1000)`.
11+
Por exemplo, tínhamos uma função `f` e a substituímos por `f = debounce(f, 1000)`.
1212

13-
Então se a função encapsulada for chamada aos 0ms, 200ms, e 500ms, e depois não houver chamadas, a `f` atual será somente chamada uma vez, aos 1500ms. Ou seja, depois do período de espera de 1000ms após a última chamada.
13+
Então se a função embrulhada for chamada aos 0ms, 200ms, e 500ms, e depois não existirem chamadas, a `f` verdadeira apenas será chamada uma vez, aos 1500ms. Isto é: depois do período de arrefecimento de 1000ms da última chamada.
1414

1515
![](debounce.svg)
1616

17-
...E receberá os argumentos da última chamada, outras chamadas são ignoradas.
17+
...E obterá os argumentos da última chamada, outras chamadas são ignoradas.
1818

19-
Aqui está o código para isso (que usa o decorador debounce da [biblioteca Lodash](https://lodash.com/docs/4.17.15#debounce)):
19+
Eis o código para isto (que usa o decorador de redução da [biblioteca Lodash](https://lodash.com/docs/4.17.15#debounce)):
2020

2121
```js
2222
let f = _.debounce(alert, 1000);
2323

2424
f("a");
2525
setTimeout( () => f("b"), 200);
2626
setTimeout( () => f("c"), 500);
27-
// a função de debounce espera 1000ms após a última chamada e depois executa: alert("c")
27+
// a função de redução espera 1000ms após a última chamada e depois executa: alert("c")
2828
```
2929

30-
Agora um exemplo prático. Vamos dizer, que o usuário digita alguma coisa, e gostaríamos de fazer um pedido ao servidor quando a entrada tiver terminado.
30+
Agora um exemplo prático. Digamos, que o utilizador digita algo, e gostaríamos de enviar uma requisição a servidor quando a entrada for terminada.
3131

32-
Não adianta enviar um pedido por cada caractere digitado. Ao invés disso gostariamos de esperar, e então processar todo o resultado.
32+
Não faz sentido enviar uma requisição por cada carácter digitado. Em vez disto, gostaríamos de esperar e depois processar todo o resultado.
3333

34-
Num navegador, nós podemos configurar um gerenciador de eventos -- uma função que é chamada em todas as alterações no campo de entrada. Normalmente, um gerenciador de eventos é chamado com frequência, a cada tecla pressionada. Porém, se nós fizermos o `debounce` dele por 1000ms, então ele será chamando apenas uma vez, depois de 1000ms após a última entrada.
34+
Num navegador da Web, podemos configurar um manipulador de evento -- uma função que é chamada sobre toda mudança dum campo de entrada. Normalmente, um manipulador de evento é chamado com muita frequência, para toda tecla digitada. Mas se usássemos `debounce` nesta por 1000ms, então apenas será chamada uma vez, após 1000ms depois da última entrada.
3535

3636
```online
3737
38-
Neste exemplo online, o gerenciador coloca o resultado na caixa abaixo, experimente:
38+
Neste exemplo ao vivo, o manipulador coloca o resultado numa caixa abaixo, experimenta:
3939
4040
[iframe border=1 src="debounce" height=200]
4141
42-
Você vê? A segunda entrada chama a função de debounce, assim o seu conteúdo será processado após 1000ms depois da última entrada.
42+
Vês? A segunda entrada chama a função reduzida, então o seu conteúdo é processado após 1000ms depois da última entrada.
4343
```
4444

45-
Portanto, `debounce` é uma excelente maneira de processar uma sequência de eventos: seja ela uma sequência de teclas pressionadas, movimentos do rato ou alguma outra coisa.
45+
Portanto, `debounce` é uma excelente maneira de processar uma sequência de eventos: seja uma sequência de pressões de tecla, movimentos de rato ou qualquer outra coisa.
4646

47-
Ela espera o tempo dado depois da última chamada, e depois executa a sua tarefa, que pode processar o resultado.
47+
Esta espera o dado tempo depois da última chamada, e depois executa a sua função, que pode processar o resultado.
4848

4949
A tarefa é implementar o decorador `debounce`.
5050

51-
Dica: são apenas uma poucas linhas se você estiver a pensar nisso :)
51+
Sugestão: são apenas algumas linhas, se pensarmos bem :)

0 commit comments

Comments
 (0)