Filtrowanie po nazwie – inna opcja

Wzorzec DEBOUNCE

let nameTimer;
$('#s_name').on('input', function(){
  clearTimeout(nameTimer);
  var val = $(this).val().trim();
  nameTimer = setTimeout(function(){
    url.searchParams.delete('page');
    if(val) {
      url.searchParams.set('s_name', val);
    } else {
      url.searchParams.delete('s_name');
    }
    location.href = url.toString();
  }, 500);
});

let nameTimer;
Zmienna przechowująca identyfikator timera (początkowo undefined).

---
$('#s_name').on('input', function(){ ... });
Nasłuchuje na każde wciśnięcie klawisza w polu #s_name.

---
clearTimeout(nameTimer);
Kasuje poprzedni timer — jeśli użytkownik wcisnął kolejny klawisz zanim minęło 500ms, stary timer jest anulowany. Dzięki temu
zapytanie nie zostanie wysłane po każdej literze.

---
var val = $(this).val().trim();
Pobiera aktualną wartość pola i usuwa białe znaki z początku i końca.

---
nameTimer = setTimeout(function(){ ... }, 500);
Ustawia nowy timer na 500ms. Jeśli przez pół sekundy nie wciśnięto kolejnego klawisza — wykona kod w środku.

---
url.searchParams.delete('page');
if(val) {
  url.searchParams.set('s_name', val);
} else {
  url.searchParams.delete('s_name');
}
location.href = url.toString();
Po 500ms bezczynności:
- usuwa parametr page (wraca do strony 1),
- jeśli jest tekst — dodaje ?s_name=wartość do URL,
- jeśli pole puste — usuwa s_name z URL,
- przekierowuje na nowy URL, co odświeża stronę z filtrem.

---
Efekt końcowy: użytkownik wpisuje "DIET" — strona odświeży się dopiero gdy przestanie pisać przez 0,5 sekundy. Bez debounce każda
litera wywołałaby osobne przeładowanie strony.