Debouncing – opóźnienie wykonania funkcji

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() ); });