Debouncing champs d'input ? Mode d'emploi ?

Bonjour à tous,

J'ai tenté de mettre en place une fonction debounce ci-dessous concernant les input de type number de mon formulaire de recherche mais me suis perdu en chemin : je ne sais pas comment l'implémenter dans le code existant (juste après: if(input.type =="number"){" ...)

Merci de m'expliquer comment faire :)

filters.js:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
window.onload = () => {
 
  //Filtres de type input
  const filtersForm = document.querySelector("#filters");
 
  document.querySelectorAll("#filters input").forEach((input) => {
    input.addEventListener("change", () => {
      // if(input.type =="number"){
 
      // }
      if (input.value !== "" && input.value !== null) {
        //Récupération des données du formulaire
        const Form = new FormData(filtersForm);
 
        //Création de la queryString
        const Params = new URLSearchParams();
 
        Form.forEach((value, key) => {
          Params.append(key, value);
        });
 
        //Récupération de l'url active
        const Url = new URL(window.location.href);
 
        //Lancement requête Ajax
 
        fetch(Url.pathname + "?" + Params.toString() + "&ajax=1", {
          headers: {
            "X-Requested-With": "XMLHttpRequest",
          },
        })
          .then((response) => response.json())
          .then((data) => {
            //Recherche de la zone de contenu
            const content = document.querySelector("#content");
 
            //Remplacement du contenu
            content.innerHTML = data.content;         
 
            //Mise à jour de l'url
            history.pushState({}, null, Url.pathname + "?" + Params.toString());
          })
          .catch((e) => alert(e));
      } else {
        alert("Le champ de filtre ne peut pas être laissé vide !");
        // input.value = 0;
      }
    });
  });
 
  //Affiche le menu de filtres lateral gauche
  const showfilters = document.querySelector("#show-filters");
  const wrapperfiltres = document.querySelector(".wrapper-filtres");
 
  showfilters.addEventListener("change", () => {
    if (showfilters.checked) {
      wrapperfiltres.style.width = "220px";
      // document.querySelector(".wrapper").style.marginLeft = "220px";
      wrapperfiltres.style.transition = "ease-in 1s";
      wrapperfiltres.style.display = "block";
    } else {
      wrapperfiltres.style.width = "0px";
      // document.querySelector(".wrapper").style.marginLeft = "0px";
      wrapperfiltres.style.transition = "ease-out 1s";
      wrapperfiltres.style.display = "none";
    }
  });
 
  function debounce(cb, delay = 1000) {
    let timeout;
 
    return (...args) => {
      clearTimeout(timeout);
      timeout = setTimeout(() => {
        cb(...args);
      }, delay);
    };
  }
};