2
respostas

Decorador "throttle" - sugestão para melhorar a experiência do usuário.

Na minha opinião, a experiência do usuário seria melhor se, ao clicar nos botões "Incluir" ou "Importar", as funções fossem executadas de imediato, e não apenas após o tempo definido. Se, por exemplo, por algum motivo esse intervalo tivesse que ser de 2s, mesmo que no primeiro clique "válido", o usuário esperaria 2s para ver o resultado. Fora o tempo que a requisição a uma API no mundo real levaria para retornar com uma resposta.

Modifiquei o código utilizando uma variável auxiliar "bloqueiaExecucao", que é modificada no "setTimeout" e do cujo valor a execução do "metodoOriginal" depende. Funcionou bem nos meus testes, mas gostaria de uma opinião sobre como abordei essa solução, pois não me parece muito polida.

export function throttle(milissegundos: number = 500) {

    return function(target: any, propertyKey: string, descriptor: PropertyDescriptor) {

        const metodoOriginal = descriptor.value;

        let timer: NodeJS.Timeout;
        let bloqueiaExecucao: boolean = false;

        descriptor.value = function(...args: any[]) {
            if(event){
                event.preventDefault();
            }
            clearTimeout(timer);
            timer = setTimeout(() => bloqueiaExecucao = false, milissegundos);
            if(!bloqueiaExecucao){
                metodoOriginal.apply(this, args); 
                bloqueiaExecucao = true;
            } 
        }
        return descriptor;
    }
}
2 respostas

Fala ai Conrado, tudo bem? Acho que a solução foi bem implementada, muito bom.

Mas, eu ainda recomendo você seguir com o debounce, que seria esperar X tempo e não executar de imediata. Essa é uma boa prática e um padrão já bem definido e utilizado na web.

E é claro que não vai ser aguardado dois segundos para execução, normalmente é questões de milissegundos e através de micro interações a gente consegue proporcionar um bom feedback e experiência para as pessoas.

Abraços e bons estudos.

Muito obrigado pelo feedback Matheus!