Bonjour à tous,
Dans la fonction ci-dessous j'aimerai incorporer un debounce (voir 2ème fonction en bas) concernant les input de type "number", j'ai commencé à coder par rapport à un tutoriel mais je ne sais pas comment l'appliquer sur les dits input...
Je suppose qu'il faut d'abord passer par un if(input.type="number") pour l'appliquer qu'à ce genre d'input mais que faire après ?
D'autre part quel serait le délai classique et raisonnable à mettre en place ?
Merci d'avance de m'aiguiller...
//Filtres de type input
const filtersForm = document.querySelector("#filters");
document.querySelectorAll("#filters input").forEach((input) => {
input.addEventListener("input", () => {
// 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");
showfilters.addEventListener("change", () => {
if (showfilters.checked) {
filtersForm.style.transform = "translateX(0px)";
filtersForm.style.transition = "transform ease-in-out 2s";
setTimeout(function collapse() {
filtersForm.style.display = "block";
}, 2100);
} else {
filtersForm.style.transform = "translateX(-100%)";
filtersForm.style.transition = "transform ease-in-out 2s";
setTimeout(function collapse() {
filtersForm.style.display = "none";
}, 3100);
}
});
function debounce(cb, delay = 1000) {
let timeout;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(() => {
cb(...args);
}, delay);
};
}
};