O que é Debounce e qual sua importância para a performance? \| TreinaWeb               Promoção no ar   Matricule-se agora e garanta **54% de desconto**  

  Termina em   Tempo restante da oferta: 11 Horas 

 34 Min 

 36 Seg 

   Tempo restante da oferta: 11 34 36 

  [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) 

   [                ](https://www.treinaweb.com.br)  Explorar  

 [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) 

     [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) O que é Debounce e qual sua importância para a performance?  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 

# O que é Debounce e qual sua importância para a performance?

 Veja como a técnica de Debounce pode te ajudar a cuidar da performance da sua aplicação.

 [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 9 anos atrás

  ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/05/12101840/debounce.png)  

Olá, Web Developers!

Hoje vou falar sobre Debounce e a importância de saber quando usar em nossas aplicações.

Se você nunca usou essa técnica ao lidar com eventos como `scroll`, `resize`, `mousemove`, `key*`, etc, pode ser que enfrente problemas com seus dados e com a performance da sua aplicação.

[  ![Dart - Tópicos Avançados](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/dart.svg)   Curso Dart - Tópicos Avançados Conhecer o curso ](https://www.treinaweb.com.br/curso/dart-topicos-avancados)

## Um exemplo básico

Imagine que temos um simples `input` do tipo texto. Nós vamos querer que, conforme o usuário vá escrevendo, alguns valores sejam exibidos como sugestão, assim como quando iniciamos uma busca no Google.

Então, quando o usuário para de escrever, temos que enviar o que ele escreveu para o nosso servidor para poder exibir as sugestões.

No exemplo abaixo, ao invés de fazer uma requisição, eu apenas incrementei um contador para vermos quantas requisições teríamos feito se essa fosse uma aplicação de verdade.

```js
const myInput = document.querySelector('input'),
	mySpan = document.querySelector('span');
let counter = 0;

myInput.addEventListener('input', function(){
	mySpan.innerText = ++counter;
})

```

Vamos usar o evento “onInput” como exemplo. Se escrevermos “TreinaWeb” nesse input, veja que o contador vai acusar que o evento foi disparado 9 vezes.

**Imagine só:** apenas para enviar “TreinaWeb” para nosso servidor, teríamos feito 9 requisições se tivéssemos usado um simples evento “onInput” sem nenhum tratamento.

Pode parecer pouco, mas pense quando precisamos escutar outros eventos, como um `scroll` ou `mousemove`. Uma simples ação do usuário pode acabar disparando centenas ou até milhares de eventos.

Uma solução melhor é fazer uma verificação para saber se o usuário ainda está escrevendo. Se ele parou de digitar, então podemos enviar nosso texto para o servidor.

É aí que entra o `Debounce`. Ele permite a execução de uma função apenas se um determinado tempo se passou.

## Um tratamento simples

Teste agora o exemplo abaixo com o tratamento para ver a diferença. Ao escrever com uma certa velocidade, o evento só será disparado quando você encerrar a digitação.

Mudamos pouca coisa no código:

```js
const myInput = document.querySelector('input'),
	mySpan = document.querySelector('span');

let counter = 0,
	timer = null; // variavel para armazenar nosso timer

myInput.addEventListener('input', function(){
	// limpamos o timer
  	clearTimeout(timer);
	// armazenamos o timer novamente
  	timer = setTimeout(function(){
  		mySpan.innerText = ++counter;
  	}, 500);
})

```

Veja só o que fizemos:

Nossa função agora é executada dentro de um `setTimeout`. Estamos passando 500ms, ou seja, nosso código só será executado após meio segundo. Você pode mudar esse valor de acordo com sua necessidade.

Nós guardamos o resultado do `setTimeout` numa variável que chamamos de `timer`. Acontece que enquanto o usuário estiver digitando, menos de 500ms se passarão, então o nosso evento `input` será executado novamente. Veja que logo no começo dele nós limpamos o nosso timer com a função `clearTimeout`. Isso quer dizer que antes mesmo do nosso código ser executado, nós já cancelamos ele. E aí criamos outro `setTimeout`.

Caso o usuário pare de digitar, nosso evento `onInput` não será executado novamente, fazendo com que a linha onde executamos o `clearTimeout()` não seja executada, permitindo que o nosso código finalmente seja executado.

Bem simples e faz um grande benefício para nossas aplicações. Algumas bibliotecas, como o RxJS, nos fornecem já a opção de debounce para executarmos funções numa quantidade reduzida caso haja a possibilidade delas serem chamadas muitas vezes em um tempo muito curto.

## Criando uma função “debounce” para reutilização

Tudo bem que só adicionamos menos de cinco linhas em nosso código para tratar uma função, mas imagine que a gente esteja em um sistema e a gente queira tratar várias funções.

Para isso, é melhor criar uma função que trate o debounce para nós.

```js
const myInput = document.querySelector('input'),
	mySpan = document.querySelector('span');
let counter = 0;

function debounce(func, wait) {
	let timer = null;
	return function() {
		clearTimeout(timer);
		timer = setTimeout(func, wait);
	}
}

myInput.addEventListener('input', debounce(function(){
	mySpan.innerText = ++counter;
}, 500));

```

No código acima nós simplesmente criamos uma função `debounce()` que já faz o que conhecemos: tem uma variável “timer” e executa uma função que limpa o timer e executa nossa função após um determinado tempo.

Para essa função `debounce()` nós passamos a função que queremos executar e o tempo que ela deve esperar para ser executada.

Agora temos o mesmo comportamento e também temos a possibilidade de reutilizar essa função em outros lugares.

[  ![Acessibilidade -  Desenvolvendo sites acessíveis](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/acessibilidade-web.svg)   Curso Acessibilidade - Desenvolvendo sites acessíveis Conhecer o curso ](https://www.treinaweb.com.br/curso/acessibilidade-desenvolvendo-sites-acessiveis)

[  ![React Native - Acesso às APIs de Hardware](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react-native.svg)   Curso React Native - Acesso às APIs de Hardware Conhecer o curso ](https://www.treinaweb.com.br/curso/react-native-acesso-as-apis-de-hardware)

- [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript)
- [ #Performance ](https://www.treinaweb.com.br/blog/tag/performance)

Autor

 ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm)

## Akira Hanashiro

 Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. 

 [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro)  

## Continue estudando

 Transforme leitura em prática com os cursos e formações da TreinaWeb.

 [Ver cursos](https://www.treinaweb.com.br/cursos)   

  Continue lendo

## Artigos relacionados

- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/teste-de-performance-javascript-400x280.png)  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 

     6 anos atrás

    ##  [ Testes de Performance JavaScript ](https://www.treinaweb.com.br/blog/testes-de-performance-javascript) 

     Conheça as várias maneiras para se fazer testes de performance em seus códigos JavaScript para melhorar a experiência de seus usuários.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2024/04/sistemas-mensageria-min-400x280.png)  [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 

     3 anos atrás

    ##  [ O que é e quais as diferenças entre Kafka, RabbitMQ e AWSSQS ](https://www.treinaweb.com.br/blog/o-que-e-e-quais-as-diferencas-entre-kafka-rabbitmq-e-awssqs) 

     Confira nesse artigo o que são sistemas de mensageria, o que são e quais as diferenças entre Kafka, RabbitMQ e AWSSQS.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/12/TS-ZOD-400x280.jpg)  [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 

     3 anos atrás

    ##  [ O que é o Zod? ](https://www.treinaweb.com.br/blog/o-que-e-o-zod) 

     Neste artigo vamos ter uma introdução sobre o Zod, uma biblioteca de declaração e validação de dados em TypeScript e criar um exemplo de como utilizá-la.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/11/Clean-Architecture-400x280.png)  [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 

     3 anos atrás

    ##  [ O que vem a ser a Clean Architecture? ](https://www.treinaweb.com.br/blog/o-que-vem-a-ser-a-clean-architecture) 

     Confira nesse artigo uma introdução do que é a Clean Architecture, quais seus componentes e os benefícios ao utilizar essa arquitetura.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/08/code-review-400x280.png)  [ Engenharia de Software ](https://www.treinaweb.com.br/blog/categoria/engenharia-de-software) 

     3 anos atrás

    ##  [ O que é code review e quais são os benefícios? ](https://www.treinaweb.com.br/blog/o-que-e-code-review-e-quais-sao-os-beneficios) 

     Confira neste artigo o que vem a ser o code review e quais são os benefícios de colocar isso em prática no seu time.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/05/closure-400x280.jpg)  [ Desenvolvimento ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento) 

     4 anos atrás

    ##  [ O que é Closure ](https://www.treinaweb.com.br/blog/o-que-e-closure) 

     Neste artigo, veremos o que é Closure e por que é tão importante entendê-lo para saber o que acontece por debaixo dos panos na linguagem.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/02/CSS-JS-400x280.jpg)  [ CSS ](https://www.treinaweb.com.br/blog/categoria/css) 

     4 anos atrás

    ##  [ O que é PostCSS e suas funcionalidades ](https://www.treinaweb.com.br/blog/o-que-e-postcss-e-suas-funcionalidades) 

     Neste artigo veremos uma ferramenta que vem auxiliando muito os desenvolvedores durante seus projetos, sendo ela, PostCSS.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/12/BFF-400x280.jpg)  [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 

     4 anos atrás

    ##  [ O que é BFF? ](https://www.treinaweb.com.br/blog/o-que-e-bff) 

     Conheça neste artigo o pattern arquitetural BFF (Backend For Frontend).

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/11/O-QUE-E-HTML-400x280.jpg)  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 

     4 anos atrás

    ##  [ O que é HTML? ](https://www.treinaweb.com.br/blog/o-que-e-html) 

     No artigo de hoje, será abordado o tema HTML, nele irá conter desde sua história, quem o criou e como deve ser montada sua estrutura.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/10/o-que-e-e-como-comecar-com-golang-400x280.jpg)  [ Desenvolvimento Back-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-back-end) 

     4 anos atrás

    ##  [ O que é e como começar com Go (Golang)? ](https://www.treinaweb.com.br/blog/o-que-e-e-como-comecar-com-golang) 

     Neste artigo vamos ter o contato inicial com a linguagem Go (Golag) e aprender um pouco sobre as suas características e como funciona a sua sintaxe.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/EVENT-STORMING-400x280.jpg)  [ Arquitetura de Software ](https://www.treinaweb.com.br/blog/categoria/arquitetura-de-software) 

     4 anos atrás

    ##  [ O que é o Event Storming? ](https://www.treinaweb.com.br/blog/o-que-e-o-event-storming) 

     Em situações complexas, pode ser complicado enxergar as fronteiras entre domínios, subdomínios e bounded contexts. Para auxiliar nessa missão, existe uma técnica que pode ser utilizada: trata-se do Event Storming.

     Ler artigo
- ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2022/09/TAILWIND-CSS-400x280.jpg)  [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 

     4 anos atrás

    ##  [ O que é Tailwind CSS e como instalar via CDN? ](https://www.treinaweb.com.br/blog/o-que-e-tailwind-css-e-como-instalar-via-cdn) 

     Neste artigo aprenderemos a criar um navbar usando Tailwind CSS, e entender melhor como funciona seus componentes de estilização.

     Ler artigo

## Um ano de acesso total para você viver de programação.

 Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho.

- **1 ano** de acesso a **todos os cursos**
- Cursos novos **toda semana**
- Suporte **direto com professores**
- Plano de carreira **personalizado**
- **Certificados digitais** inclusos
- **Aplicativos** para Android e iOS, com **acesso offline**

    **Garantia incondicional de satisfação** 

 Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro.

### Acesso completo a todos os cursos e dezenas de Formações.

 12 meses 

  Economize R$ 840,00  54% OFF 

 de 12x R$ 129,00 por apenas

 12x  R$ 59,00

 sem juros no cartão de crédito ou R$ 599,00 à vista

  Oferta termina em  **11h 34min 36s**

- Acesso imediato e ilimitado durante 1 ano.
- Plano de carreira personalizado.
- Suporte direto com professores.
- E muito mais!

 [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26)

     [                ](https://www.treinaweb.com.br)

 Escola online de programação, tecnologia e IA.

- [  ](https://www.facebook.com/TreinaWeb/)
- [  ](https://www.instagram.com/treinaweb/)
- [  ](https://www.youtube.com/user/TreinaWeb)
- [  ](https://twitter.com/treinaweb)
- [  ](https://www.linkedin.com/company/treinaweb)
- [  ](https://github.com/treinaweb)

## Inscreva-se em nossa newsletter

Receba lançamentos, promoções e novidades.

   Seu nome     Seu WhatsApp     Seu melhor e-mail   Inscrever-se 

## Cursos

- [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs)
- [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end)
- [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end)
- [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile)
- [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados)
- [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing)
- [ IA ](https://www.treinaweb.com.br/categoria/ia)
- [ E mais ](https://www.treinaweb.com.br/categoria/e-mais)
- [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos)

## Conteúdo

- [ Formações ](https://www.treinaweb.com.br/formacoes)
- [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos)
- [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto)
- [ Planos ](https://www.treinaweb.com.br#assinatura)
- [ Depoimentos ](https://www.treinaweb.com.br#depoimentos)
- [ Comunidade ](https://www.treinaweb.com.br#comunidade)
- [ Corpo docente ](https://www.treinaweb.com.br#docente)

## A empresa

- [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre)
- [ Perguntas frequentes ](https://www.treinaweb.com.br#faq)
- [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb)
- [ Cursos para empresas ](https://www.treinaweb.com.br/empresas)
- [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso)
- [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco)
- [ Artigos ](https://www.treinaweb.com.br/blog)
- [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers)
- [ Contato ](https://www.treinaweb.com.br/contato)
- [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade)
- [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso)

## Baixe nosso aplicativo

 [   Disponível na **App Store**  ](https://apps.apple.com/us/app/treinaweb/id1322729447) [   Disponível no **Google Play**  ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) 

  Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200   © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58