无限滚动不适用于AJAX

Question

I am trying to implement Infinite scroll with AJAX and PHP. But it is not working properly. I am trying to implement search operation. Whenever a user searches for some string instead of loading the entire details once. It loads 5 details once ( will be increased to 50 in Production). I am using AJAX for it. This is my PHP code:

$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);

I am returning the fetched elements.

This is my JS code for initial search:

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 is the value that acts as offset in sql query. I am incrementing it every time one I get 5 details.

this is my code to load the details to the table

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
}

The above code is int the function named load_search() and I am calling the function on

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

Once all the reponse is brought to the site, to prevent further requests I am using search_values_completed variable.

My problem here is as AJAX is asynchronous, it is getting called multiple times when I scroll to the bottom. Sometimes it is requesting the data with same offset value. This is resulting in duplication of data. Is there any way to prevent it ??

Any suggestion is accepted, Need help

Please comment if any queries about the question