Debouncing de Função

Idioma:
JavaScript
42 visualizações
0 favoritos
2025年9月19日

Implementação do Código

JavaScript
function debounce(fn,delay){
    let timerId;
    return function(...args){
        clearTimeout(timerId);
        timerId=setTimeout(()=>{
            fn.apply(this,args);
        },delay);
    };
}

//usage
const d_layout = debounce(layout,500);
window.onresize = d_layout;

Em JavaScript, a função de debouncing é uma ferramenta essencial para otimizar operações de alta frequência e que consomem tempo. Sua lógica central consiste em atrasar a execução da função e cancelar atrasos repetidos. Isso garante que uma função acionada várias vezes em um curto período só seja executada após aguardar um tempo de atraso especificado a partir do último acionamento, evitando perda de desempenho causada por chamadas desnecessárias.

Seu princípio de funcionamento pode ser entendido por meio da analogia com "o fechamento das portas de um elevador": Depois que um elevador abre as portas, ele aguarda um período fixo por padrão (por exemplo, 2 segundos) antes de fechá-las. Se durante esse tempo de espera um novo passageiro entrar (o que corresponde a um novo acionamento da função), o temporizador de espera original é cancelado e a contagem regressiva é reiniciada. Apenas quando não houver novos acionamentos após o fim da contagem regressiva, a ação de "fechar as portas" (que corresponde à execução da função) será realizada.

#Debouncing de Função

Descrição do Fragmento

Cenários Aplicáveis

  • Ação de alta frequência: A função é chamada repetidamente em um curto período (por exemplo, eventos resize da janela, eventos input de campos de texto). Isso não se limita a eventos DOM, mas também se aplica a chamadas de função de alta frequência em ambientes não DOM (como o Node.js).
  • Funções que consomem tempo: A função chamada é do tipo intensivo em CPU (por exemplo, cálculos de layout da página, operações extensas com DOM que causam reflows/repinturas) ou intensivo em E/S (por exemplo, requisições de rede, leitura e gravação de arquivos). Operações simples (como calcular 1+1) não precisam de debouncing.
  • Prioridade ao resultado final: Entre os resultados de várias chamadas em um curto período, só é necessário manter o resultado da última chamada. Por exemplo, após ajustar o tamanho da janela, só é necessário o layout correspondente ao tamanho final; os layouts gerados durante o processo de ajuste não têm sentido.

Comentários

Carregando...