Attendre la fin de la frappe

import { ref, watch } from "vue";

/**
 * Une copie de `source` qui ne prend sa nouvelle valeur qu'après `delai` ms
 * sans changement (anti-rebond) : on ne recherche plus à chaque lettre.
 */
export function useAntiRebond(source, delai = 300) {
  const valeur = ref(source.value);
  watch(source, (nouvelle, ancienne, auNettoyage) => {
    const minuteur = setTimeout(() => (valeur.value = nouvelle), delai);
    auNettoyage(() => clearTimeout(minuteur)); // un nouveau changement annule l'attente
  });
  return valeur;
}

<script setup>
import { ref } from "vue";
import { useAntiRebond } from "../composables/useAntiRebond.js";
import { useFetch } from "../composables/useFetch.js";

const saisie = ref("");
const q = useAntiRebond(saisie, 300);
const { donnees: livres } = useFetch(() => `/api/livres?q=${encodeURIComponent(q.value)}`);
</script>

On tape « java » à raison d'une lettre toutes les 80 millisecondes :

requêtes après la frappe : ["?q=java"]
Programmation Java

Une seule requête part, 300 millisecondes après la dernière lettre. Le troisième paramètre du rappel d'un watch enregistre une fonction de nettoyage, appelée juste avant le rappel suivant : chaque nouvelle lettre annule l'attente de la précédente. Et si le composant disparaît pendant l'attente, Vue appelle aussi ce nettoyage.