Бесконечная прокрутка не работает должным образом с AJAX

Question

Я пытаюсь реализовать бесконечную прокрутку с помощью AJAX и PHP.Но это не работает должным образом.Я пытаюсь реализовать операцию поиска.Всякий раз, когда пользователь ищет какую-то строку, а не загружает всю информацию один раз.Он загружает 5 деталей один раз (будет увеличен до 50 при производстве).Я использую AJAX для этого.Это мой код PHP:

$get_elements_by_date = Jsonresponse::dbconnect()->prepare("SELECT * FROM paths INNER JOIN data ON data.filepath = paths.path_id INNER JOIN user ON data.data_user_id = user.user_id where paths.dir_path like :val and data.date_uploaded = :date_up and user.session_id = :session limit :lim offset :off");
    $get_elements_by_date->bindParam( ":session", $_SESSION['user']);

$get_elements_by_date->bindValue(':lim', (int)$lim, PDO::PARAM_INT);
$get_elements_by_date->bindValue(':off', (int)$off, PDO::PARAM_INT);
$get_elements_by_date->bindParam(':val', $val);
$get_elements_by_date->bindParam(':date_up', $_POST['date']);
$get_elements_by_date->execute();
$details = $get_elements_by_date->fetchall(PDO::FETCH_ASSOC);

Я возвращаю извлеченные элементы.

Это мой код JS для начального поиска:

off_search = 0;
$.post('../BaseClass', {
  action: 'search_by_date',
  search: value,
  key: $(".custom-select").val(),
  token: $("#token").val(),
  date: $("#input_date").val(),
  offset: off_search,
},function(data) {
  off_search += 5;
  console.log(off_search);
  if(data.data[0] == 'no')
  {
  $(".loading1").remove();
  $(".table").remove();
  $(".upload_content").append("<center><h1 class='result' style='color:red;'>No records found<h1><center>");
  }
  else
  {
   // construct the table out of details
  }

off_search - это значениеэто действует как смещение в запросе SQL.Я увеличиваю его каждый раз, когда получаю 5 деталей.

Это мой код для загрузки деталей в таблицу

if(search_values_completed == 1)
{
console.log("returned here " + search_values_completed);
return;
}
$.post('../BaseClass', {
action: 'search_by_date',
search: value,
key: $(".custom-select").val(),
token: $("#token").val(),
date: $("#input_date").val(),
offset: off_search,
},function(data) {
console.log("search values is " + search_values_completed);
if(search_values_completed == 1)
{
  return;
}
off_search += 5;
console.log(off_search);
if(data.data[0] == 'no') {
  // perform no operation.
  search_values_completed = 1;
}
else
{
  //add to table
}

Приведенный выше код представляет собой функцию с именем load_search () иЯ вызываю функцию на

$(window).scroll(function() {
if((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
        load_content()
 }
 }

Как только весь ответ доставлен на сайт, для предотвращения дальнейших запросов я использую переменную search_values_completed.

Моя проблема здесь в том, что AJAX асинхронный, он вызывается несколько раз, когда я прокручиваю до конца.Иногда он запрашивает данные с одинаковым значением смещения.Это приводит к дублированию данных.Есть ли способ предотвратить это ??

Любое предложение принято, Нужна помощь

Пожалуйста, прокомментируйте, если есть вопросы по этому вопросу