4

Vejo que muitas pessoas utilizam técnicas como debounce para evitar que uma função seja chamada muitas vezes. Mas também vejo muito uma técnica chamada throttle.

Ness sentido, qual a diferença entre debounce e throttle?

1
  • Coloquei a tag ui porque não consegui pensar em alguma melhor. Acho que é algo muito usado em interfaces de usuários, o que me fez colocar aquela tag. Mas também não se limita a isso. Se alguém tiver uma melhor sugestão de tag... 17/04/2020 às 16:06

1 Resposta 1

6

Apesar de terem comportamentos parecidos, o uso de cada um vai depender da situação em que você se encontra.

O throttle é utilizado para limitar o numero de vezes que uma função vai ser chamada em um intervalo de tempo.

Exemplo de utilidade em UI: Você têm um botão de atualizar dados, que faz uma Request para o seu servidor, se o usuário clicar várias vezes no botão, o front pode chamar o servidor várias vezes no mesmo segundo. Se nesse mesmo botão, você utilizar um throttle com 3 segundos, nos 3 segundos após o primeiro click do usuário no botão (nesse primeiro ele chama), o sistema não vai mais chamar o servidor, só liberando a função para ser chamada novamente após esse intervalo.

Já o debounce, só executa uma função depois de um certo intervalo sem chamar ela. (posterga sua execução).

Exemplo de utilidade em UI: Se o mesmo botão do exemplo anterior, tivesse sido implementado com debounce de 3 segundos, o usuário poderia clicar em atualizar quantas vezes ele quisesse, mas o sistema só irá fazer uma requisição ao servidor a partir do momento em que ele ficar 3 segundos sem clicar no botão após o ultimo clique.

Achei esse exemplo na internet que da pra ver bem o funcionamento dos dois: Throttle vs Debounce no scroll da pagina. Nele vc pode notar a diferença em como a função é chamada, sendo que ela é chamada quando o usuário desce o scroll da página.

OBS: Lembrando que se o usuário tentar chamar uma função com throttle antes do intervalo terminar, apesar de ele evitar que a função seja chamada, ele vai executar a função assim que o intervalo terminar, por isso se usar o throttle para atualizar sua interface, é bom manter em mente esse comportamento (ja tive problemas nessa parte hasuhas).

3
  • 2
    Esse exemplo eu acho bem legal também: demo.nimius.net/debounce_throttle
    – hkotsubo
    17/04/2020 às 16:59
  • 2
    Um exemplo útil para Debounce: validação no onChange de uma input. Se você for validar cada vez que o usuário digitar, possivelmente ocorrerá problemas de desempenho, o uso de debounce aqui é uma ótima opção pois validaria somente nos "intervalos" de digitação :) 17/04/2020 às 18:31
  • @RafaelTavares Um ótimo caso de uso, com certeza vou usar no meu trabalho 17/04/2020 às 19:52

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .