JavaScript, debounce pattern, closure e duas amigas
8 min8 minutos de leitura
8 min8 minutos de leitura
Autor(a)
Flavio Henrique de Souza Almeida
Flávio é desenvolvedor e instrutor, focado no desenvolvimento com Angular e procurando conciliar o frontend com o backend. Palestrou em conferências como QCON e MobileConf. É autor do best-seller "Cangaceiro JavaScript". Além da sua graduação e MBA em TI, também é graduado em Psicologia, aplicando os aprendizados desta área no desenvolvimento de software e de aplicações web.
Inscreva-se em nossa Newsletter
Fique por dentro de conteúdos, insights e oportunidades do universo tech. Receba novidades e lançamentos direto no seu e-mail.
No último desafio entre amigas, Maya propôs um desafio a Victoria que o encarou com maestria.
No final, Maya pediu que Victoria também a desafiasse para que pudesse mostrar suas habilidades em JavaScript. Victoria não perderia a oportunidade de colocar sua amiga à prova.
Hora da revanche, o novo desafio
Depois de terem almoçado juntas, Victoria elaborou a seguinte estrutura HTML para o desafio de Maya:
Victoria ficou calada, pediu para que Maya testasse o código e tudo funcionou. Em seguida, elaborou o seguinte comentário:
"O botão poderia estar realizando uma requisição para um servidor web, uma API, certo? Nesse caso, o que aconteceria se o usuário, frenéticamente, clicasse várias vezes seguidas igual ao "The Flash" no botão?"
Maya respondeu:
"O servidor teria que atender todas essas requisições desnecessárias."
O padrão de projeto Debounce
Por fim, com um sorriso malicioso no rosto, Victoria passou a instrução final do desafio, que antes parecia simples:
"Você deve postergar a execução de exibeMensagem caso ela seja chamada novamente em menos de um segundo através do clique do botão. Fácil, não? Para complicar um pouquinho, sua solução deve ser aplicável em diversos lugares de uma aplicação, sem repetir código."
Maya quis confirmar se entendeu corretamente o pedido:
"Se eu clicar 10 vezes em menos de um segundo, apenas o último clique será processado, certo?""
"Perfeitamente", diz Victoria.
Por fim, Maya profere:
"Você quer que eu implemente o padrão de projeto Debounce, é isso?"
Victoria ficou pálida, pois tinha certeza que Maya não saberia resolver a questão e ainda lhe disse o nome do padrão de projeto a ser empregado para solucionar o problema. Ela ficou calada e Maya deu início a sua implementação.
Primeiro, ela criou a função debounce, mas apenas seu esqueleto:
Victoria pediu que a amiga explicasse para ela o esqueleto do código da função. Maya esclareceu que a função debounce recebe dois parâmetros. O primeiro é a função que desejamos assegurar que seja executada no máximo uma vez a cada X segundos. O segundo é o valor em milissegundos do intervalo de tempo que será considerado.
Vendo como tudo se encaixa
Gentilmente, Maya pediu a Victoria uma licença poética e começou a utilizar a função debounce antes de estar pronta, para que a amiga pudesse entender como ela se encaixa com o evento "click" do botão.
functiondebounce(fn, milissegundos) { return() => {
} }
functionexibeMensagem() {
console.log('Fui clicado')
}
// fn encapsula a função exibeMensagem const fn = debounce(exibeMensagem, 1000);// passa fn para ser executada no evento click document .querySelector('#botao') .addEventListener('click', fn);
Maya explicou que o retorno de debounce é uma função configurada para utilizar um temporizador que chamará exibeMensagem respeitando a janela de tempo de um segundo, como Victoria havia pedido.
Victoria disse:
"Ah, muito engenhosa essa sua solução. Você está usando debounce para criar uma nova função que encapsula exibeMensagem. Esse encapsulamento é necessário, porque o evento "click" não pode chamar diretamente exibeMensagem, pois ela não possui um temporizador. Já a nova função, sim."
Simplificando um pouco as coisas
Como Victoria já tinha entendido como as coisas se encaixavam, Maya alterou seu código, evitando a necessidade de declarar a variável fn:
Agora, ela precisava continuar a implementação da função debounce para seu código funcionar. A primeira alteração que fez foi usar setTimeout para agendar a execução da função após a quantidade de milissegundos passada para debounce, no caso, 1000 equivalem a um segundo:
Maya explicou que Victoria poderia testar o código do jeito que está, mas que ele não funcionaria como esperado. Se ela desse 100 cliques rapidamente no botão em menos de um segundo, todos eles seriam executados, com a diferença de que cada um esperaria um segundo antes de ser executado.
Maya disse que a solução estava no retorno de setTimeout. Ela ajustou o seu código e guardou o retorno na variável timer:
functiondebounce(fn, milissegundos) { return() => {
// guardando o ID do setTimeout let timer = setTimeout(fn, milissegundos); } }functionexibeMensagem() { console.log('Fui clicado') }
document .querySelector('#botao')
.addEventListener('click', debounce(exibeMensagem, 1000));
A variável timer guarda um ID ligado ao setTimeout executado. Com o ID, é possível parar o setTimeout através de clearTimeout(timer).
Continuando sua implementação ela fez:
functiondebounce(fn, milissegundos) {
return() => { // há um problema aqui, conseguem enxergar?clearTimeout(timer);
let timer = setTimeout(fn, milissegundos); } }
functionexibeMensagem() {
console.log('Fui clicado')
}
document.querySelector('#botao')
.addEventListener('click', debounce(exibeMensagem, 1000));
Um problema não esperado
Assim que Maya acabou de realizar a alteração no código, Victoria, com ar de confiança, disse que o código não funcionaria do jeito que está.
Maya hesitou durante alguns segundos e após realizar um teste viu que a amiga tinha razão. Quando ela clicava no botão, a seguinte mensagem de erro era exibida:
Uncaught ReferenceError: timer is not defined
Há sempre uma explicação
"Quer desistir", diz Victoria. Mas Maya reconheceu o seu erro e decidiu explicar para a amiga o que aconteceu:
"Para que minha solução funcione, a cada clique do botão eu preciso parar um timer já existente com clearTimeout(timer). O problema é que no primeiro clique, ainda não temos um timer rodando para ser parado, inclusive a variável timer é declarada após o clearTimeout(timer)."
Maya esclareceu que estava iniciando o timer com zero e que isso não faria mal nenhum para clearTimeout. Victoria respondeu:
"Faz até sentido, pois na primeira vez que você clicar não existe um timer sendo processado. Já podemos testar o seu código?"
Mais uma vez o código de Maya não saiu como esperado. Continuou com o mesmo problema de antes. Todos os cliques foram processados, com a diferença de que cada ação do clique foi executada um segundo depois.
Victoria pergunta mais uma vez se a sua amiga quer desistir. Maya já estava entregando a toalha quando de repente deu um grito:
"Já sei! Basta eu mover a declaração de timer para o escopo da função debounce."
Para a surpresa de Victoria, o código de Maya funcionou como esperado.
Closure?
Reconhecendo a competência da amiga, Victoria pediu que ela lhe explicasse a razão do seu código ter funcionado com essa pequena alteração. Muito modesta, Maya respondeu:
"A função de debounce é chamada apenas uma vez e seu retorno, uma nova função, é associada ao evento click do botão. Certo? Essa nova função quando retornada por debounce trouxe com ela todo o contexto no qual foi declarada. É isso que permite a função ainda ter acesso à variável timer declarada no escopo da função debounce mesmo após esta última ter sido totalmente processada e retornado seu valor."
Com base no que acabei de explicar, o primeiro clique no botão fará clearTimeout(timer) assumindo o valor zero, o que não resultará em erro nenhum, para logo em seguida atualizar o valor de timer com um novo ID retornado por setTimeout. Todos os outros cliques acessarão e modificarão a mesma variável timer, fundamental para que a solução funcione.
Victoria, depois de olhar atentamente disse:
"Isso tudo que você acabou de explicar, a noção de que uma função retornada por outra função traz o contexto da função que a retorna nada mais é do que o conceito de closure. Eu sabia desde do ínício, só queria saber se você tinha ideia disso.
No final, as duas amigas se abraçaram e marcaram de ir ao cinema assistir "Cangaceiro JavaScript".
