frontend: implement fetchwithBackoff
We're fetching too soon and too often stuff from the backend. Making the search input behaviour a bit flaky. Implementing a backoff fetching strategy. We'll trigger the query only after 500ms of inactivity and will cancel the previous requests before triggering a new one.
This commit is contained in:
parent
3fe2a4af9c
commit
c9a0a898aa
1 changed files with 24 additions and 8 deletions
|
@ -167,7 +167,7 @@
|
|||
}
|
||||
|
||||
// Function to update list of voies (calls backend API)
|
||||
function updateVoies(codeInsee, search = '') {
|
||||
function updateVoies(search = '') {
|
||||
var api = "addresses/fantoirvoies/" + codeInsee + '?limit=15';
|
||||
if (search != '') {
|
||||
api += "&s=" + search;
|
||||
|
@ -201,6 +201,21 @@
|
|||
console.error("Error fetching communes:", err)
|
||||
})
|
||||
}
|
||||
|
||||
function fetchWithBackoff (fetchFn, timeout, input) {
|
||||
if(timeout !== null) {
|
||||
clearTimeout(timeout);
|
||||
}
|
||||
if (input.length < 3) {
|
||||
return null;
|
||||
}
|
||||
timeout = setTimeout(() => {
|
||||
const cleanInput = sanitizeInputStr(input);
|
||||
fetchFn(cleanInput);
|
||||
}, 100);
|
||||
return timeout;
|
||||
}
|
||||
|
||||
$('#methodAddress').on('show.bs.collapse', function () {
|
||||
$('#communeInput').trigger('input')
|
||||
$('#communeInput').trigger('keyup')
|
||||
|
@ -216,10 +231,10 @@
|
|||
$('#numeroVoieInput').focus();
|
||||
});
|
||||
|
||||
$('#communeInput').on('keyup', function () {
|
||||
let timeoutCommune = null;
|
||||
$('#communeInput').on('input', function () {
|
||||
controllerCommunes.abort();
|
||||
inputStr = sanitizeInputStr($(this).val());
|
||||
updateCommunes(inputStr);
|
||||
timeoutCommune = fetchWithBackoff(updateCommunes, timeoutCommune, $(this).val());
|
||||
});
|
||||
|
||||
$('#communeInput').on('input', function () {
|
||||
|
@ -227,10 +242,11 @@
|
|||
$('#voieForm').collapse('hide');
|
||||
}
|
||||
});
|
||||
$('#voieInput').on('keyup', function () {
|
||||
|
||||
let timeoutVoie = null;
|
||||
$('#voieInput').on('input', function () {
|
||||
controllerVoies.abort();
|
||||
inputStr = sanitizeInputStr($(this).val());
|
||||
updateVoies(codeInsee, inputStr);
|
||||
timeoutVoie = fetchWithBackoff(updateVoies, timeoutVoie, $(this).val());
|
||||
});
|
||||
$('#voieInput').on('input', function () {
|
||||
if ($(this).val() === '') {
|
||||
|
@ -246,4 +262,4 @@
|
|||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</html>
|
||||
|
|
Loading…
Reference in a new issue