Przy wpisywaniu nazwy podczas wyszukiwania – opóźniamy wysłanie zapytania do momentu zakończenia wprowadzania tekstu – zwykle 400ms.
Definicja funkcji debounce w pliku – /js/common.js
const tooltipTriggerList = document.querySelectorAll('[data-bs-toggle="tooltip"]')
const tooltipList = [...tooltipTriggerList].map(tooltipTriggerEl => new bootstrap.Tooltip(tooltipTriggerEl))
function debounce(func, timeout = 400){
let timer;
return (...args) => {
clearTimeout(timer);
timer = setTimeout(() => { func.apply(this, args); }, timeout);
};
}
Użycie debounce w kodzie js
// Zmieniono domyślne opóźnienie 400 na 500ms
const debounceName = debounce((str) => liveSearchCompanyByName(str), 500);
$("#fullname").on('keyup', function(){
var name_str = $(this).val().trim();
var name_len = name_str.length;
if( name_len >= 3 ) {
debounceName(name_str);
} else{
clearNameResults();
}
});
Obsługa wyszukiwania / filtrowania (url.searchParams)
// Uruchomienie debouncera z timeoutem 600ms
// Jeśli jest fraza ustaw searchParam, jeśli nie usuń
const debounceNumber = debounce( (s_number) => {
if(s_number) {
url.searchParams.delete('page');
url.searchParams.set('s_number', s_number);
} else {
url.searchParams.delete('s_number');
}
location.href = url.toString();
}, 600);
// wpisywanie w pole wyszukiwania (s_number)
$("#s_number").on('keyup', function(){ debounceNumber( $(this).val() ); });