Debounce vs throttle, de forma visual

Visualizador de debounce vs throttle

Debounce vs throttle em JavaScript, de forma visual | We.Inc

Passe o ponteiro sobre o painel e veja eventos brutos, chamadas com debounce e chamadas com throttle em uma única linha do tempo. Funções de debounce e throttle para copiar, além de hooks React.

O debounce espera as chamadas pararem por um tempo definido e então roda uma vez, o que serve para campos de busca e salvamento automático. O throttle roda no máximo uma vez por intervalo enquanto as chamadas continuam chegando, o que serve para rolagem, redimensionamento e rastreamento do ponteiro. Os dois recebem uma função e um atraso em milissegundos e retornam uma função envolvida que você chama no lugar.

Qual usar

Situação
Use
Por quê

Busca enquanto digita
Debounce, cerca de 300 ms
Uma requisição depois que a pessoa pausa

Salvamento automático de formulário
Debounce, cerca de 1000 ms
Salva uma vez quando a digitação acalma

Posição da rolagem ou barra de progresso
Throttle, cerca de 100 ms
Atualizações regulares durante a rolagem

Cálculos de layout ao redimensionar a janela
Throttle ou debounce
Throttle para feedback ao vivo, debounce para o tamanho final

Evitar cliques duplos de envio
Debounce com leading edge
O primeiro clique vale, as repetições são ignoradas

Os dois termos se confundem porque ambos reduzem a frequência com que uma função roda. O painel abaixo mostra a diferença em uma linha do tempo compartilhada: cada evento bruto como um traço fino, cada chamada com debounce e cada chamada com throttle como um ponto. Mude o atraso e o padrão muda junto.

Mova o ponteiro ou o dedo pelo painel, ou segure uma tecla enquanto ele estiver em foco.
Os eventos brutos preenchem a faixa de cima. A faixa do meio mostra as chamadas com debounce, a de baixo as chamadas com throttle.
Arraste o controle de atraso e repita para ver como o intervalo muda os dois padrões.
Copie as funções simples ou os hooks React abaixo para o seu código.

Crie a função com debounce uma única vez. Criar uma nova a cada render do React reinicia o timer, então ela nunca dispara.
Cancele as chamadas pendentes quando um componente for desmontado, ou uma chamada atrasada pode atualizar algo que não existe mais.
Para animações ligadas à rolagem, requestAnimationFrame costuma ser melhor que um intervalo fixo de throttle.
Aplique o debounce na parte cara, como a requisição de rede, não no estado do próprio input, senão a digitação fica travada.

Perguntas frequentes

Qual é a diferença entre debounce e throttle?

O debounce reinicia o timer a cada chamada e só roda quando as chamadas pausam. O throttle ignora as chamadas dentro da janela atual, mas roda de novo assim que a janela passa, então dispara com regularidade durante uma rajada longa.

O que são leading edge e trailing edge?

O leading edge é a primeira chamada de uma rajada; o trailing edge é o momento em que o intervalo da rajada termina. Um debounce trailing roda depois da pausa, um leading roda imediatamente e depois ignora as chamadas até a pausa. Throttles podem disparar em qualquer uma das bordas ou nas duas.

Preciso do lodash para fazer debounce?

Não. As funções desta página têm poucas linhas cada. A versão de uma biblioteca adiciona opções como maxWait, cancel e flush, que são úteis, mas fáceis de adicionar por conta própria se você precisar de apenas uma delas.

Qual deve ser o atraso?

Não existe um único número certo. Comece com cerca de 300 milissegundos para digitação e 100 para rolagem ou ponteiro, e ajuste pela sensação. Mais curto parece mais responsivo, mas economiza menos trabalho.

Como o debounce funciona

Cada chamada limpa o timer pendente e inicia um novo. Só quando o timer sobrevive ao atraso inteiro a função original roda, com os argumentos da última chamada.
Isso torna o debounce perfeito para intenção: você não se importa com cada tecla, só com a palavra que a pessoa terminou de digitar. O custo é a latência, já que nada acontece até a pausa.

Como o throttle funciona

Um throttle lembra quando rodou pela última vez. Uma chamada dentro do intervalo é descartada ou, na versão trailing, guardada para rodar quando o intervalo terminar. Chamadas fora do intervalo rodam na hora.
Use quando o usuário deve ver feedback contínuo, como um cabeçalho fixo reagindo à rolagem, mas rodar a cada evento seria desperdício.

Versões em JavaScript puro

debounce(fn, wait)

Trailing edge. cancel() descarta qualquer chamada pendente.

throttle(fn, wait)

Roda no leading edge e mais uma vez no fim da janela se chegaram chamadas nesse meio-tempo, então o último valor nunca se perde.

Hooks React

useDebouncedCallback

Mantém um único timer durante a vida do componente, sempre chama o callback mais recente e limpa o timer ao desmontar.

useThrottledValue

Retorna uma cópia de um valor que muda rápido e que se atualiza no máximo uma vez por intervalo.

Eventos brutos

Com debounce ({n} ms)

Com throttle ({n} ms)

Visualizador

Passe o ponteiro sobre o painel. Traços finos são eventos brutos; pontos são chamadas que realmente rodaram depois do debounce ou do throttle.

Atraso: {n} ms

Painel de eventos: mova o ponteiro aqui ou segure uma tecla

Mova aqui (ou dê foco e segure uma tecla)

A linha do tempo mostra os últimos seis segundos; os números contam as chamadas nessa janela.