JS-1109 - JavaScript Completo ES6 - Debounce

JS-1109 - JavaScript Completo ES6 - Debounce
Publicado em 29/07/2021 10h26
Visualizações: 411

Controlando execução de eventos

Para este exemplo, será utilizado o conteúdo do projeto prático. Caso queira o montar em seu ambiente de desenvolvimento, leia o conteúdo do JS-0302 - JavaScript Completo ES6 - Início do Projeto Prático.

Para baixar o projeto, clique aqui.

Debounce consiste em uma função auxiliar, utilizada para controlar eventos que, devido a sua implementação, podem ocorrer muitas vezes em uma ação simples de um usuário, em intervalos tão curtos que nem seriam detectáveis, mas que consumiriam e desperdiçariam recursos da aplicação. Então, esta função aplica um intervalo pré definido entre as execuções deste evento, poupando recursos do dispositivo e não influenciando na usabilidade

Esta função será aplicada na classe se animação ao scroll, no exemplo JS-1108 - JavaScript Completo ES6 - Refatoração Animação ao Scroll, onde um leve movimento do scroll ativa o método "activeAnimation" da classe "AnimationScroll". Um console.log inserido neste método demonstra a quantidade de ativações até a segunda seção da página (FAQ):

JS-1109 - JavaScript Completo ES6 - Debounce

JS-1109 - JavaScript Completo ES6 - Debounce

JS-1109 - JavaScript Completo ES6 - Debounce

O método ativou 106 vezes, mesmo diante de sua refatoração, após a execução de um scroll básico, direto para a segunda seção.

Logicamente neste exemplo não há o risco de travamento do navegador, o consumo de recursos em um único método em uma página simples é baixo para a maioria de dispositivos, mas em aplicações robustas, com um grande número de eventos ocorrendo simultaneamente, poderiam ocorrer perdas de performance.

Será desenvolvida uma função, que será aplicada no evento de scroll, e poderá ser reaproveitada em outros eventos, tal como resize). Esta função necessita basicamente de dois argumentos, o callback (função que será ativada controladamente) e o intervalo de tempo (delay). O setTimeout, será o controlador da ativação do método e uma variável, "timer", será utilizada como sinal para a remoção do evento. O retorno desta função, poderá receber argumentos, e para permitir o seu uso independente do que seja, será utiliza o rest opertator:

JS-1109 - JavaScript Completo ES6 - Debounce

Agora, esta função poderá ser importada de forma bem simplificada na classe AnimationScroll e aplicada no bind do construtor no método activeAnimation, aplicando o delay de cinquenta milissegundos:

JS-1109 - JavaScript Completo ES6 - Debounce

Agora, a ativação ocorreu apenas duas vezes até a mesma seção:

JS-1109 - JavaScript Completo ES6 - Debounce

No final, foi executado o comando do webpack, para montar o arquivo main.js comprimido:

$ npx webpack --entry ./js/script.js -o ./

Para baixar o projeto, clique aqui.

Para visualizar o projeto, clique aqui.

Veja também:

Confira mais artigos relacionados

Este website utiliza cookies próprios e de terceiros a fim de personalizar o conteúdo, melhorar a experiência do usuário, fornecer funções de mídias sociais e analisar o tráfego. Para continuar navegando você deve concordar com nossa Política de Privacidade

Sim, eu aceito. Não, eu não aceito.