Conflict of two ajax requests - infinite scroll and filter. How to reload the script?

Question

AJAX

I have a simple php pagination and a js script that, when scrolling the page to the very bottom, gets new posts from the next pagination page.
I'm also trying to add a script that, when clicking on the filters, loads posts from a given category also via ajax.

Filter script:

$(document).on('click', '.ajax-js', function(e){
  e.preventDefault();
  console.log('filter click');
  var link = $(this).attr('href');
  $.ajax({
    url: link,
    dataType: 'html',
    action: $("html, body").animate({ scrollTop: 0 }, 200),
    success: function(data) {
      var replacement = $('<div />').append(data).find('#replacement-js').html();
      $('#replacement-js').html(replacement);
      history.pushState(null, null, link);
    },
  });
});

Load script on scroll:

jQuery(document).ready(function($){
  var next = 2;
  var progress = false;
  $(document).on('scroll', function() {
    if($(window).scrollTop() + $(window).height() >= $(document).height() && !progress) {
      console.log('pagination '+next);
      $.ajax({
        url: location.href,
        dataType: 'html',
        method: 'get',
        data: "nav="+next,
        beforeSend: function() {
          progress = true;
        },
        success: function(data) {
          var result = $('<div />').append(data).find('.posts-box').html();
          $('.posts-box').append(result);
          progress = false;
          next +=1;
        }
      });
    }
  });
});

The variable "next" is the next page of pagination, by default it is equal to two, so far we are always initially on the first page of pagination.

When scrolling down the page, I write to the console the pagination page from which the posts are loaded, when I click on the filter, I write "filter click" there.
After clicking on the filter, the loading script is not redefined - the pagination count should start again from 2, but it continues further, and this is logical if I have two different files (ajax-filter and ajax-scroll), in the console, respectively, after scrolling down, click on the filter and the new scroll will be the following:

pagination 2
pagination 3
pagination 4
filter click
pagination 5
pagination 6
pagination 7

After all, the scroll function states that each time you scroll down the page, the next variable increases by one.
I understand that you need to call this function again every time after clicking on the filter. Let's say I do the following in the "ajax-scroll" file:

function myFunc() {
    // stuff...
}

Next, in the template, I call this function inside the "replacment-js" element, where I insert posts after clicking on the filter. Thus, after clicking on the filter, the function will be called again each time. But the old function call still remains in the browser's memory, so after clicking on the filter and scrolling down the page, we see a double call to the myFunc () function!

You should redefine this function or call the script again, I tried adding the function to the variable and then deleting it and redefining it, but this does not help.

Answer 1

You don't need to store the pagination state in the next variable, but get it on the fly right before sending the request. I don't know how your page is set up. For example, from a global variable, or somehow determined by dom, or by the current link (if it changes), and so on. And then, when changing filters, reset this state.