25.12.2024

jQuery: Chamada de Função Atrasada Após Redimensionamento

Resposta Rápida

Para garantir que o evento resize seja executado apenas após o término do redimensionamento da janela, utilize um debouncer baseado na função setTimeout:

let resizeTimer;
$(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(() => {
        // Seu código será executado apenas após o redimensionamento ser concluído
        console.log('Redimensionamento da janela concluído!');
    }, 250); // O atraso está definido para 250 milissegundos
});

Neste código, um atraso é criado utilizando a função setTimeout. Ele é redefinido cada vez que um novo evento resize ocorre. A chamada a clearTimeout garante que a função seja executada apenas uma vez após o último evento de redimensionamento. Você pode ajustar o atraso (neste caso, 250 ms) conforme as necessidades do seu projeto.

Dominando o Princípio do Debouncing

Debouncing regula efetivamente a frequência de ocorrência de eventos. Quando os eventos ocorrem de forma muito rápida e frequente, isso pode degradar o desempenho. Debouncing garante que o evento comece a funcionar apenas após um período específico de inatividade.

Ajustando o Tempo de Debouncing

Assim como um equilibrista, é necessário encontrar um equilíbrio entre uma resposta rápida aos eventos e um desempenho ideal ajustando o tempo de debouncing. Se um atraso de 250 ms parecer longo demais, reduza-o. Se os eventos de redimensionamento estiverem ocorrendo com muita frequência, aumente o tempo de atraso. Ajuste com base nas especificidades da sua aplicação.

Filtrando Eventos Irrelevantes

Utilize algumas técnicas para filtrar mudanças insignificantes no redimensionamento da janela, como aquelas que ocorrem quando barras de rolagem aparecem:

1. Desabilite as barras de rolagem mudando a propriedade overflow do elemento body durante o redimensionamento da janela.
2. Lembre-se e compare os tamanhos da janela antes de executar seu código para garantir que uma mudança realmente ocorreu.

let lastWidth = $(window).width(), lastHeight = $(window).height();
$(window).resize(function() {
    let newWidth = $(window).width(), newHeight = $(window).height();
    if(newWidth !== lastWidth || newHeight !== lastHeight){
        lastWidth = newWidth;
        lastHeight = newHeight;
        // Realize as ações necessárias aqui
    }
});

Visualização

Você pode pensar em um debouncer como um posto de controle em uma estrada:

Na estrada (🛣️), há um posto de controle (🚧) que permite a passagem de veículos em certos intervalos:

| Ação                | Movimento do Veículo    | Redimensionamento da Janela |
| --------------------| ----------------------- | ---------------------------- |
| Movimento Contínuo   | 🚗🚕🚗🚕🚗🚕🚗🚕🚗       | Redimensionamento            |
| Operações no Posto  | 🚧 ... ... 🚧 ABERTO!  | Debouncer Ativado            |
| Uma Passagem        | 🚗 (Passagem Permitida) | Evento Disparado            |

Similar a um posto de controle, o debouncer permite que um evento comece a ser processado apenas após o redimensionamento ter parado.

Armazenando o ID do Timeout de Redimensionamento

Para evitar desestabilizar o contexto global, utilize jQuery.data() para armazenar de forma confiável os identificadores de timer:

$(window).resize(function() {
    let timeoutId = $.data(this, 'resizeTimer');
    clearTimeout(timeoutId);

    timeoutId = setTimeout(() => {
        // Execute suas ações aqui
    }, 300);
    $.data(this, 'resizeTimer', timeoutId);
});

Utilize Plugins ou Funções Auxiliares

Se você prefere não entrar nos detalhes de implementar debouncing, considere usar soluções prontas oferecidas por plugins do jQuery, como jQuery Throttle/Debounce por Ben Alman, ou funções do Underscore.js e Lodash:

$(window).resize(_.debounce(function() {
    // Insira seu código aqui
}, 250));

Recursos Úteis

1. evento resize | Documentação da API do jQuery
2. Underscore.js
3. O que é a função "debounce" em JavaScript? - Stack Overflow
4. Debouncing e Throttling Explicados Através de Exemplos | CSS-Tricks
5. Janela: evento resize - APIs da Web | MDN
6. Documentação do Lodash
7. GitHub - lodash/lodash: Uma biblioteca utilitária moderna para Javascript

Video

Navigation