Rodrigo Brito

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):

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:

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

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

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.