Você já precisou executar uma função que esperasse um determinado tempo para aí sim executar?
Quando falo nesse cenário, pode passar em sua cabeça usar o setTimeout
o que não está errado!
Mas sabia que existe uma prática que podemos usar chamada debounce
?
Você já ouviu falar nesse termo?
Debounce no Javascript é uma prática usada para melhorar nossa performance nos navegadores.
Mas como assim?
É simples! Sabe aquela função que executamos para fazer uma busca enquanto o usuário está digitando no campo de busca?
Se deixarmos que a função seja executada toda vez que tivermos alteração no input, não concorda que estaremos constantemente fazendo requisições desnecessárias?
Agora e se executarmos apenas quando o usuário parar de digitar, isto é, quando ele digitou algumas letras e fez uma pausa, podemos entender que essa pausa é ele aguardando a resposta da busca, e é nesse momento em que fazemos a solicitação ao nosso back-end para a consulta!
Isso é debounce! Bem legal, né?
Vamos ver isso em código agora!
Peguei esse trecho de código deste artigo. Se você sabe inglês, recomendo a leitura!
1 | const debounce = (func, wait) => { |
No código acima temos três coisas que precisamos entender:
- Parâmetro
func
: É a função que você deseja executar após o tempo; - Parâmetro
wait
: É o tempo que você quer que a função aguarde para que execute alguma determinada função. Esse tempo é em milissegundos; timeout
: O valor usado para indicar o tempo corrido;
Agora com a nossa função criada, como podemos utilizá-la?
Basta chamar ela, passando os parâmetros necessários!
1 | var returnedFunction = debounce(function () { |
Os cenários mais comuns para o uso do debounce são: resize, scroll, e keyup/keydown.
Espero que tenha gostado e que isso possa ajudá-los a diminuir a quantidade de requisições e consequentemente, melhorar a performance de sua aplicação!