Comment débouncer un champ de recherche en JavaScript ?

Question

Mon champ de recherche envoie une requête à chaque frappe. Pour « javascript », ça fait 10 requêtes. Comment attendre que l'utilisateur ait fini de taper ?

Accepted Answer

C'est le **debounce** : on repousse l'appel tant que l'utilisateur continue de taper.

```js
function debounce(fn, delay = 300) {
  let t;
  return (...args) => {
    clearTimeout(t);
    t = setTimeout(() => fn(...args), delay);
  };
}

const search = debounce((q) => fetch(`/api/search?q=${encodeURIComponent(q)}`), 300);
input.addEventListener('input', (e) => search(e.target.value));
```

En React, debounce la **valeur** plutôt que la fonction :

```tsx
function useDebounced<T>(value: T, delay = 300) {
  const [v, setV] = useState(value);
  useEffect(() => {
    const t = setTimeout(() => setV(value), delay);
    return () => clearTimeout(t);
  }, [value, delay]);
  return v;
}
```

Pense aussi à annuler la requête précédente avec un `AbortController`, pour éviter qu'une réponse lente écrase une plus récente.

1 réponse