Question

I’m using infinite scroll to fetch new elements and extend my page. When the user applies a filter, I want to cancel any in progress fetches. Otherwise they will load on the page and won’t match the current filter.

Is there a way to do that?

Answer 1

This is how I ended up solving it.

Set a global variable midFilter, and remove all returned items via the infinite-scroll callback function.

$('#item-grid').infinitescroll(settings, function (arrayOfNewElems) {

  if (midFilter) {
    $(arrayOfNewElems).each(function () {
      $(this).remove();
    });
  }

});