Aquilenet/axione-elig-test
6
0
Fork 0
Code Issues 3 Pull requests 1 Releases Wiki Activity

frontend: implement fetchwithBackoff

Browse source 
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:
Félix Baylac-Jacqué 2022-02-12 23:32:32 +01:00
parent 3fe2a4af9c
commit c9a0a898aa
1 changed files with 24 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

32
templates/landing_form.html
View file

@ -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>