Qual é a diferença entre debounce e throttle?

Question

Accepted Answer

Ambos limitam com que frequência uma função é executada em resposta a eventos rápidos e repetidos — mas com diferentes estratégias de tempo.

- **Debounce**: execute a função apenas **depois que a atividade para** por N ms. Reseta o timer a cada chamada. → "aguarde até terminar."
- **Throttle**: execute a função **no máximo uma vez a cada N ms** durante atividade contínua. → "execute em um ritmo constante."

```text
events:    x x x x x x x ........ x x x
debounce:                 ↑ (fires once, after the pause)
throttle:  ↑     ↑     ↑           ↑     (fires periodically)
```

## Implementação de debounce

```js
function debounce(fn, ms) {
  let timer;
  return (...args) => {
    clearTimeout(timer);                  // cancel the previous scheduled call
    timer = setTimeout(() => fn(...args), ms); // schedule a new one
  };
}
const search = debounce(q => api.search(q), 300); // only searches after typing pauses
```

## Implementação de throttle

```js
function throttle(fn, ms) {
  let last = 0;
  return (...args) => {
    const now = Date.now();
    if (now - last >= ms) { last = now; fn(...args); } // run at most every ms
  };
}
```

## Por que isso importa

- **Debounce**: busca enquanto digita, autosave, fim de redimensionamento, validação após o usuário parar de digitar — você quer o *valor final*.
- **Throttle**: manipuladores de scroll, mousemove, drag, rate-limiting — você quer *atualizações periódicas* enquanto a ação está em andamento.

## Por que isso importa

Ambos evitam executar trabalho caro (chamadas de API, recálculo de layout) centenas de vezes por segundo, que é uma técnica chave de desempenho front-end.

Bibliotecas como lodash fornecem versões robustas com opções leading/trailing.