JavaScript, debounce pattern, closure e duas amigas

Introdução

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:

<!doctype html>
<html>
    <head> 
			<meta charset="UTF-8"> 
			<title>Desafio</title> 
		</head> 
		<body> 
			<button id="botao">Executa ação</button> 
			<script> </script>
		</body> 
</html>

Victoria disse:

"Maya, a página possui apenas um botão que ao ser clicado deve exibir no console o texto "Fui clicado"".

E Maya disse, surpresa:

"Só isso?"

Victoria a esclareceu que essa era a primeira parte do desafio, que lhe contaria o próximo assim que ela a resolvesse primeiro.

Maya ficou em silêncio e deu início a sua implementação:

function exibeMensagem() {
	 console.log('Fui clicado');
}
document.querySelector('#botao') 	
	.addEventListener('click', exibeMensagem);

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:

function debounce(fn, milissegundos) { return () => {
} }
function exibeMensagem() { 
	console.log('Fui clicado');
}
document.querySelector('#botao')
 .addEventListener('click', exibeMensagem);

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.

function debounce(fn, milissegundos) { return () => {
} }
function exibeMensagem() {
	 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:

function debounce(fn, milissegundos) { return () => {
} }
function exibeMensagem() { 
	console.log('Fui clicado')
}
document.querySelector('#botao') 
	.addEventListener('click', debounce(exibeMensagem, 1000));

Implementando a função debounce

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:

function debounce(fn, milissegundos) { return () => {
setTimeout(fn, milissegundos); } }
function exibeMensagem() { console.log('Fui clicado') }
document .querySelector('#botao') 
	.addEventListener('click', debounce(exibeMensagem, 1000));

Um problema esperado

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:

function debounce(fn, milissegundos) { return () => {
// guardando o ID do setTimeout let timer = setTimeout(fn, milissegundos); } }
function exibeMensagem() { 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:

function debounce(fn, milissegundos) {
return () => { // há um problema aqui, conseguem enxergar?
clearTimeout(timer); 
let timer = setTimeout(fn, milissegundos); } }
function exibeMensagem() { 
	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)."

Então, Maya tentou resolver da seguinte maneira:

function debounce(fn, milissegundos) {
return () => { // 
//inicializou a variável let timer = 0; 
//clearTimeout(timer); 
//timer = setTimeout(fn, milissegundos); } }
// código posterior omitido

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."

E foi isso que ela fez:

function debounce(fn, milissegundos) {
let timer = 0;
return () => {
	 clearTimeout(timer);
 	timer = setTimeout(fn, milissegundos); } }
// código posterior omitido

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".

Twitter: @flaviohalmeida